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%;
}
Related
I'm working on a responsive web page with images that may be larger than the max-width of a mobile browser screen. In the example below, I'm using an image from https://stackoverflow.com/company which is 975x573.
Consider this snippet.
img {
max-width: 100%;
height: auto;
}
<img height="573" width="975" src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/photos/big/1.jpg?v=17b956bfb68e">
<p>test</p>
<img height="573" width="975" src="https://stackoverflow.com/missing-image.png">
<p>test</p>
This sample includes two images, one that exists, and one that doesn't exist.
I want the image boxes for both images to be the same height, 100% width with the aspect ratio preserved.
Instead, the existing image is correctly resized with its aspect ratio preserved, but the broken image is 16x16, which (in my full site) makes my layout look weird.
How do I fix this example? (Pure CSS only, please.)
It doesn't seem to be possible to style broken images the way I want. The only workaround I can find is to use a wrapper div, force the div to maintain a fixed aspect ratio, and to force the image to fill its wrapper parent.
There are a bunch of techniques for doing that in the link above. Here's one, for example.
.wrapper {
max-width: 100%;
padding-bottom: 58.77%; /* 573/975 */
position: relative;
}
img {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
max-width: 100%;
max-height: 100%;
}
<div class="wrapper"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/photos/big/1.jpg?v=17b956bfb68e"></div>
<p>test</p>
<div class="wrapper"><img src="https://stackoverflow.com/missing-image.png"></div>
<p>test</p>
Let me be clear, the "broken image" is just browsers rendered image to show you it is broken and you can not access to that "icon". So that, in some browser it is not be shown because some browsers not support.
The best solution to get the same result that you expected is using background image for your image element. Please check my codes snippet bellow:
You have to define the Aspect Ratio, in my codes I had defined the Aspect Ratio by division between height and width => 573/975.
More info: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
img {
width: 100%;
height: auto;
}
.img-cover {
background-image: url(http://via.placeholder.com/975x573);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding-top: 58.769%; /* Aspect Ratio from 573/975 */
position: relative; /* If you want text inside of it */
}
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div class="img-cover">
<div class="inner">
<img height="573" width="975" src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/photos/big/1.jpg?v=17b956bfb68e">
</div>
</div>
<p>test</p>
<div class="img-cover">
<div class="inner">
<img height="573" width="975" src="https://stackoverflow.com/missing-image.png">
</div>
</div>
<p>test</p>
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>
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>
I have an you tube video in a wrapper.
<div class="featured_video_plus">
<iframe width="730" height="435" frameborder="0" id="fvpyt234171" type="text/html" src="youtubesourcefile"></iframe>
</div>
When I put following CSS code, this you tube video is responsive.
/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
But It is NOT responsive when the wrapper is in another DIV.
I have this code also in some places:
<div class="utube-wrapper" style="width: 730px; margin: 0px 33px 32px 0px; float: left;">
<!-- Featured Video Plus v1.9-->
<div class="featured_video_plus">
<iframe width="730" height="435" frameborder="0" id="fvpyt233458" type="text/html" src="youtubesourcefile"></iframe>
</div>
</div>
How can I make this you tube video responsive when it's is in the div utube-wrapper also?
I've tried following code also.. but not working.
/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.utube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.utube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Just take out -> width 730px and float left from the utube-wrapper
One possible solution:
// CSS & HTML
.center-block-horiz {
margin-left: auto;
margin-right: auto;
}
.border-5px-inset-4f4f4f {
border: 5px inset #4f4f4f;
}
.set-padding {
padding: 30px;
}
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#Iframe-Maison-Willem-Tell {
max-width: 80%;
max-height: 300px;
overflow: hidden;
}
/* padding-bottom = h/w as % -- set aspect ratio */
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
<!-- embed responsive iframe -->
<div class="set-padding border-5px-inset-4f4f4f">
<div id="Iframe-Maison-Willem-Tell"
class="border-5px-inset-4f4f4f center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<!-- style overflow and overflow-scrolling inline because not
stable in CSS -->
<iframe src="http://maisonwillemtell.be">
<p style="font-size: 110%;"><em><strong>IFRAME: </strong>
There is iframe content being displayed
here but your browser version does not support iframes. </em>
Please update your browser to its most recent version
and try again.</p>
</iframe>
</div>
</div>
</div>
The result can be seen in the Pen Responsive Iframe - Base Code.
The markup and CSS and the rationale behind them are taken from How to Make Responsive Iframes — it’s easy! and from Scaling iframes for responsive design CSS-only.
One salient point is to remove all styling from the <iframe> tag. Style with CSS only, with the exception of overflow-scrolling and overflow which are styled inline in the <div> wrapper around the <iframe>. Another point is to set width and height be setting max-width and max-height in the <div> wrapper around .responsive-wrapper.
The outer most <div> is not necessary; it's just there to show the effects of padding and border.
To position the iframe left you might use flex box instead of float.