Question says it all,how is it possible to embed a vimeo video in bootstrap 3.0 ?
Example Code:
<div class="container">
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="//player.vimeo.com/video/71876963" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
</div>
Is unfortunately not working.
Please try this code, it works in bootply
<div class="container">
<div class="row">
<div class="span6">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">
<iframe allowfullscreen="" src="http://player.vimeo.com/video/71876963" frameborder="0" width="500" height="281"></iframe>
</div>
</div>
</div>
</div>
Here's a simple solution that works for me, tested in Bootstrap 3.0:
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://player.vimeo.com/video/71876963"></iframe>
</div>
Related
I'm trying to embed Grafana panels into my website and have a problem with styling
How to make my iframes to fit inside the col-sm and not with a big margins (see attached screenshot)
My html is:
<p class="fs-1 fw-bold" id="internalSensors_1">
Internal Beehive Sensors
</p>
</div>
<div class="row">
<!-- Internal temperature from Grafana-->
<div class="col-sm">
<div class="col-sm embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https:***" allowfullscreen frameborder="0"></iframe>
</div>
</div>
<!-- Internal humidity from Grafana-->
<div class="col-sm">
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https:***" allowfullscreen frameborder="0"></iframe>
</div>
</div>
<!-- Internal pressure from Grafana-->
<div class="col-sm">
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https:***" allowfullscreen frameborder="0"></iframe>
</div>
</div>
</div>
Try to do the following :
give a .w-100 to the <iframe></iframe>
give a .p-0 to <div class="col-sm">
I would like to put these two images side by side
Here is my code:-
code
<div class="container-md">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
you code work perfectly with bootstrap 5. Added your code with dummy images in codepen.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?cs=srgb&dl=pexels-philipp-m-100582.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?cs=srgb&dl=pexels-veeterzy-38136.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
.row {
display: flex;
justify-content: space-around;
}
this is one way to do it using CSS.
Update:
There is now space around the two images.
Check out this URL to understand more about CSS Flexbox, and all the awesome things you can do !
I have a problem with my friend's website which I can't solve. If you could help I'd be very pleased..
And the problem is:
My bootstrap div doesn't hold a height and is going under following div, especially in tablet/phone responsive version. Maybe it will be easier if I give you the address:
http://trido.io/index3.html
and the code I'm talking about is:
<section id="download" class="download bg-primary text-center">
<div class="container">
<div class='col-md-1'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
<div class='col-md-4'>
<div class="row">
<div class='col-md-1'>
</div>
<div class='col-md-9'>
<p align="center">TriDo - Do a chain of three!</p><br>
<p>Arrange your balls in order from 1 to 3:
horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br>
</div>
</div>
<div class="row">
<ul>
<li>Multiplayer<li>
<li>Endless single-player mode<li>
<li>Game Center leaderboards<li>
<li>Game Center Achievements<li>
</ul>
</div>
</div>
<div class='col-md-1'>
</div>
<div class="col-md-5">
<div class="device-container">
<div class="device-mockup iphone6 portrait black">
<div class="device">
<div class="screen">
<!-- <video width="300" height="534" controls> -->
<video width="270" height="480" controls>
<source src="TrailerDoTel.mp4" type="video/mp4">
<source src="TrailerDoTel.ogg" type="video/ogg">
</video>
<div class="button">
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-0.5'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
</div>
</section>
This is because your <div class="device-mockup iphone6 portrait black"> is set to position absolute which takes the element out of the flow of the document, so its content will not affect other elements in the DOM.
If you set it to position: relative; it will no longer overlap the div below it.
Or you can give your .device-container a static height, like height: 676px;
I have an iframe in Angular2 which adjust its height and width according to the size of an transparent image. Until the the URL specified inside iframe loads I want to display a spinner icon but it hides behind the transparent image. How can I place the icon over that image?
Here is my HTML code:
<div class="wrapper" *ngIf = "showIframe" id="feedsIframe" >
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" class="h_iframe">
<section class="widget" widget>
<div class="widget-body">
<div class="loader animated fadeIn handle" id="spinner007">
<span class="spinner">
<i class="fa fa-spinner fa-spin"></i>
</span>
</div>
</div>
</section>
<img class="ratio" src="assets/img/pictures/transparent2.png">
<iframe class="embed-responsive-item" scrolling="yes" frameborder="0" allowfullscreen [src]="iframeURL" allowfullscreen >
</iframe>
<a (click) = "goBack()" class="button">
<span style="color: #555;" >BACK</span>
</a>
</div>
</div>
I have that code for two columns with iframes:
<div class="container">
<div class="jumbotron" style="background-color:rgba(0,0,0, 0.3);">
<div class="row row-eq-height">
<div class="col-md-9" style="padding-right:20px; border-right: 3px solid #ccc;">
<div class="embed-responsive embed-responsive-16by9" style="border:2px solid #2c3e50;">
<iframe class="embed-responsive-item" src="xxxx"></iframe>
</div>
</div>
<div class="col-md-3">
<div class="embed-responsive embed-responsive-16by9" style="border:2px solid #2c3e50;">
<iframe class="embed-responsive-item" src="xxxxxx"></iframe>
</div>
</div>
</div>
</div>
</div>
Problem is that right iframe is very tiny, I want to have the same height as first iframe on second.
How can I set height of second iframe to be the same as height of first iframe?
Why don't you set the height of the right iframe? For example, style="height:200px"