I'm trying to embed a Youtube video into a webpage using Bootstrap, but I want it to take up the whole width of the page.
HTML:
<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
CSS:
.youtube {
width:100%;
}
JSFiddle
But I have two issues:
The video preview is cutoff by the height when the webpage is large (you can only see half of the video preview).
When the video plays, it is still in its small format.
How can I fix this using Bootstrap?
In Bootstrap v3 this construct will do a full width iframe:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/H_CN8W_uCys?wmode=transparent&rel=0&showinfo=0" allowfullscreen=""></iframe>
</div>
I know this looks stupid but I was inspired by inspected code on Bootstrap official web page:
.embed-responsive{
position: relative;
padding-top: 56.25%;
}
.youtube{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
56.25% - this is the proportion thing, ya know, 16:9 etc ;)
This is actually solvable with pure CSS through an understanding of aspect ratios. The code is easy enough, just replace your .youtube selector with the following code:
.embed-responsive {
position: relative;
width:100%;
height: 0;
padding-top: 56.25%;
}
.youtube{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
This sets the parent of the YouTube iframe to have a 100% width fluidly, with an aspect ratio of 16/9, by using a 0 height with a padding top of 56.25%. Then you just need to make the iframe fill that parent, which is achieved with absolute positioning and a height and width of 100%.
You need to add the class container-fluid instead of container.
Try this code:
<section id="about" class="home-section text-center">
<div class="container-fluid">
<div class="row">
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0">
</iframe>
</div>
</div>
</div>
</section>
Related
I've tried every combination of properties and attributes I can think of to get this iframe to embed in a WordPress post so that all of it is visible on both mobile and large screens. It seems I need to specify a height to get the whole frame to display, but doing so then stops all the width showing on mobile.
Any help much appreciated.
<div markdown="0" id="island">
<iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>
You need to create your iframe inside another element (with it's position relative), and place your iframe with an absolute position:
The padding-top: 56.25% is useful for keeping the ratio (16:9) of the iframe.
Working JSfiddle (try resizing the display tab :)).
Html:
<section>
<article id="iframe">
<iframe src="src.html"></iframe>
</article>
</section>
Css:
section{
max-width: 800px;
}
#iframe{
width: 100%;
max-width: 800px;
position: relative;
padding-top: 56.25%;
}
iframe{
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: auto;
display: block;
position: absolute;
}
src: smashingmagazine.com
edit: here's a video of a resizeable iframe :)
edit2: oopps, forgot a section tag
This works great, until I have 2 or more iframes in the same container, then they just overlap each other because they both have the same absolute position.
How do I allow for an arbitrary number of iframes inside of a container built to house iframes and maintain their aspect ratios?
From: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
And use the following CSS:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Don't put 2 videos in the same container. Put 2 containers and wrap them in a single wrapper. Then change the width and bottom-padding to whatever you want.
.container {
position: relative;
width: 50%;
height: 0;
padding-bottom: 28.13%;
display:inline-block;
margin:0;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="container">
<iframe src="//www.youtube.com/embed/3Sdes6QuPro" frameborder="0" class="video"></iframe>
</div><div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" class="video"></iframe>
</div>
</div>
I embed a vimeo video on my website like this:
<div class="fys-fp-content-wrapper">
<div id="fys-fp-video">
</div>
</div>
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
The Vimeo iFrame is loaded into #fys-fp-video.
However the Video in its original is only 640px width. I want to always display the video in a width of 100%, regardless whether something of the video is but of because of the 600px height, but it is important that it is shown full width.
Does somebody has a hint how I can achieve that?
thanks!
If you use bootstrap, it's easy :
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Source Bootstrap 4: https://getbootstrap.com/docs/4.0/utilities/embed/
Update Bootstrap 5:
https://getbootstrap.com/docs/5.0/helpers/ratio/#example
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="embed-responsive embed-responsive-16by9">
<iframe lass="embed-responsive-item" src="https://player.vimeo.com/video/54596361" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
I think what you are looking for is vw (viewport width). width:100% means 100% width of the parent. width:100vw means 100% of the screen. I suggest you do like this:
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 600px;
}
I'm using an <embed> element so I can render a PDF inline. It works well in all browsers, but I can't figure out how to have the <embed> take up the entire, available height in my Bootstrap column. Here is a Plunker. You'll need to widen the preview pane to see the columns next to each other.
This is my markup:
<div class="container">
<div class="row">
<div class="col-sm-7">
<div id="pdf-container">
<div id="pdf">
<embed width="100%" type="application/pdf" src="http://pdf.pdf">
</div>
</div>
</div>
<div class="col-sm-5">
Other stuff here
</div>
</div>
</div>
And here is the CSS that isn't completely working:
#pdf-container {
bottom: 20px;
left: 20px;
position: absolute;
right: 20px;
top: 0;
}
#pdf-container #pdf {
height: 100%;
width: 100%;
}
What I'm challenged with is that it seems like you need to set the height directly on the '` element so they even render. Setting the width on them to 100% is effective, but I can't get the height to take up 100% of the available height.
UPDATE: There appear to be a series of Bootstrap classes (.embed-responsive) that may be aimed at handling this, but when I apply it, my <embed> doesn't appear at all. Here is a Plunker for that.
I put mine in responsive iframes. Change the padding-bottom and padding-top: 30px; to suit your needs
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<object width="100%" data="https://modelica.org/events/modelica2012/authors-guide/example-abstract.pdf?scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed width="100%" type="application/pdf" src="https://modelica.org/events/modelica2012/authors-guide/example-abstract.pdf?scrollbar=0&toolbar=0&navpanes=0">
</object>
</div>
</div>
embedding video in grid system of Bootstrap 3.1, video is not expanding full width of the grid column. How to make it 100% wide to the parent column keeping the aspect ratio?
Also, even if I use a 4:3 video, it appears very wide in the browser with very short height.
here is my code:
<div class="row">
<div class="col-md-8">
.
<!-- other items-->
.
</div>
<div class="col-md-4">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/gYhi3pAiQY4"></iframe>
</div>
</div>
</div>
As Rob said in a comment:
Pretty sure embed-responsive wasn't added until 3.2. Try updating.
If you're unable to update, for one reason or another, you can add the styles yourself. It's fairly straight forward. Here's the SASS:
// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
}
// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
padding-bottom: 75%;
}