I understand Bootstrap 3.3.6 has support for 16by9 and 4by3 formats for embedded iframes. How do I embed if I would like to du a customized own size that is something other than 16by9 and 4by3? Like a format of 5by3 but still remain proportionate when scaling.
Thank you very much.
The Bootstrap suggested ways:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
embed-responsive-XbyY only gives the padding bottom equal to ratio Y/X as percentage
You can easily make an embed-responsive-5by3 3/5 = 60%
.embed-responsive-5by3{
padding-bottom: 60%;
}
.embed-responsive gives the rest of the styling
Related
I am working on a website in which I want to place a video in html using boostrap 4. The video is in mp4 format.
The html code which I have tried/used in order to place a video is:
<header class="container border masthead_video text-white text-center">
<div class=""
type="video/mp4" autoplay="autoplay" loop="loop"></video>
</div>
<div class="row mt-5">
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
</div>
</div>
</header>
Problem Statement:
I am wondering if there is any predefined header class in bootstrap like we have navbar where we can place images and videos. Also, what changes I need to make in order to place a video here:
<div class=""
type="video/mp4" autoplay="autoplay" loop="loop"></video>
</div>
The docs detail embedding videos in html while using Bootstrap 4. Try replacing your video snippet with this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
The embed-responsive-16by9 means it's for 16:9 aspect ratios. There are other options like:
embed-responsive embed-responsive-4by3 for 4:3 ratios
embed-responsive embed-responsive-1by1 for 1:1 ratios
etc
I have a website using bootstrap and on the core of my page I have a picture and below is a youtube video embeded:
<div class="col-xs-12 col-sm-12">
<a href="tech.php">
<img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600">
</a>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen></iframe>
</div>
</div>
Link to website here.
When I first load this page what I see with this solution (and dislike) is that my video extends below my screen. So I am after a way to state the size of my picture and video as a ratio of the screen size, so that my video resizes to stay within the boundaries of the screen.
I have looked for ideas on the internet (i.e. css edit as in here) but I get lost or it does not do what I expect.
Any idea?
If you just add a CSS entry to specify the minimum height of the video it will not clip it on load and bootstrap will take care of keeping it in ratio on resize. Code:
.embed-responsive{
min-height:100%;
}
Of course you will probably want to target the div a little more specifically but I think this should do what you are after.
I would go about this differently, I wouldn't use an absolute positioned element for video and I would set a height or min-height to use viewport units vh
So it might look like:
#youtube-video {
width: 100%;
min-height: 40vh;
}
And remove all the absolute positioning on that element.
Additionally you might want to set an ID or class on your top container and give it some margin-top to offset your fixed header:
#top-container {
margin-top: 50px;
}
Lastly I would move the footer outside the bootstrap container completely by moving the </div> to be above your footer.
<div class="container">
....
</div>
<footer class="footer">
...
</footer>
I have made a responsive website using bootstrap, and I have a media page with an embedded video. My code for it is this...
<div class="col-lg-6 col-lg-offset-3">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="video/yellow-bend1.mp4" width="600"></iframe>
</div>
</div>
It displays fine on large screens, but when I visit using my mobile, the video opens and autoplays in my video app before the home page displays, and you have to close the app to see the site. Is there a way to keep it fixed on the media page on mobile displays?
This is my first experience embedding video, and all the answer Ive searched for seem to be asking the opposite of what I need.
Thanks
I found this that works:
<video autoplay=0 controls>
<source src="video/yellow-bend1.mp4" type="video/mp4" />
</video>
<div class="col-lg-6 col-lg-offset-3">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<video src="src="video/yellow-bend1.mp4"" controls></video>
</div>
</div>
Hello im creating a web site with Bootstrap 3, everything was going well till i tried to put a Youtube video in my site, so i used responsive embed class that Bootstrap provides but when i display the content of my website the video doesn't show it, i've tried many things like copying the code exactly of Bootstrap page but it still does not work!. Can someone help me?. This is my code:
<!-- PROMOTIONAL VIDEO -->
<section class="wrap" id="promo-video">
<div class="container">
<div class="header-section">
<h2>Mira el video de presentacion</h2>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=H0uvGe0AhNI"></iframe>
</div>
</div><!-- .col -->
</div><!-- row -->
</div><!-- .container -->
</section>
<!-- END PROMOTIONAL VIDEO -->
In your code src attr is wrong for IFRAME embed.
You need like this.
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PIh2xe4jnpk"></iframe>
You have entered wrong input url...
try this....
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PIh2xe4jnpk"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PIh2xe4jnpk"></iframe>
</div>
you just have to change the url by your hand .. just remove that part (/watch?v=)from the url and put(/embed/)instate
I'm working on a project and if you scroll down to the "What is RoadAware" section you can see a YouTube video embed that looks awful! I need the video to fill the "about-left" div 100% to match the "about-right" div. I've been struggling to find an answer, any help is really appreciated!
http://road-aware.herokuapp.com/
Add embed-responsive embed-responsive-4by3 to your video-wrapper class
This is from bootstrap
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>