I embed a video from youtube to my web page I want it to be stretch 100% on the screen with no blackbars. Although I give it a width of 100%, it still has some blackbars on the sides of the video. How can I get rid of it?
Screenshot:
snippet: https://jsfiddle.net/o3rp6an9/1/
<div id="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
#video {
height:100%;
width:100% !important;
background-size:100% 100%;
position:relative;
overflow:hidden;
}
There's another question about this but it basically didn't help me.
You want to absolutely position the video within a wrapper that sets vertical padding that matches the video's aspect ratio. To get the padding/aspect ratio, divide the video's height by the width and multiply by 100 to get a percentage.
* {padding:0;margin:0;box-sizing:border-box;}
#video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q? autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
Using Bootstrap 4 classes embed-responsive embed-responsive-16by9 along with this css hack did it for me.
.embed-responsive.embed-responsive-16by9 iframe {
clip-path: inset(1px 1px);
}
I found the solution here:
https://github.com/twbs/bootstrap/issues/26284#issuecomment-392017929
Related
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>
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've embed a YouTube video on my website but the trouble is that i need the height to automatically adjust based on the width and the aspect ratio of the video. So if my width is 1280, my height should be 720 if the video is 16:9.
I've tried using 'VW' and 'VH' units but these don't seem to work with an iframe. My width is already set proportionally.
My code is below:
<iframe style="margin-right: 1%; margin-left: 1%;" width="98%" height="" src="https://www.youtube.com/embed/HwzQbfde-kE" frameborder="0"></iframe>
This article contains a good answer, copied below.
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Example Html
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.
See a live example.
EDIT:
If you need to use percentage width other than 100%, multiply the ratio by the width multiplying factor. See the example below:
.video-container {
position: relative;
padding-bottom: calc(56.25% * 0.75); /* 16:9 */
width: 75%;
height: 0;
}
For everyone who looks for solution in 2022 and later:
Now in CSS we have aspect-ratio property, just set your width (In any way: px/%/...) and then add aspect-ratio property with... well... Aspect ratio.
iframe {
width: 100%;
aspect-ratio: 16 / 9;
}
<iframe src="https://www.youtube.com/embed/SNE2oCZH_4k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
If you go for the entire viewport you can use following code:
iframe{
width: 100vw;
height: calc(100vw/1.77);
}
I was able to make a responsive iframe size using vw on both width and height of the style element because I know the amount of horizontal width I want the elements to use and then I calculate the height based on the width and the knowledge that the video is 16:9. If you want the video to consume 45% of the horizontal space above screen sizes of 893px and 90% otherwise, then:
.embedded-video-16-9 {
width: 90vw;
height: 50.625vw; /* 90*9/16 */
margin-left: 5vw;
margin-right: 5vw;
}
#media (min-width: 893px) {
.embedded-video-16-9 {
width: 45vw;
height: 25.3125vw; /* 45*9/16 */
margin-left: 2vw;
margin-right: 2vw
}
}
Used like:
<iframe
class="embedded-video-16-9"
src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0"
frameborder="0"
allowfullscreen=""
></iframe>
The html width attribute only accepts numbers ("valid non-negative integers"), not strings suffixed with units of measurement (%, px, vw, etc) as in the original question.
If you know the width of the iframe's container (in an absolute unit like px or vw, not %) then you can use css calc() for a one-line height solution in css:
.youtube-embed {
--container-width: 720px;
--ratio: calc(16 / 9); /* 1.77 */
width: 100%;
height: calc(var(--container-width) / var(--ratio));
}
Here's a responsive solution that accounts for horizontal padding on the container:
:root {
--video-ratio: calc(16 / 9);
--video-container-max-width: 640px;
--video-container-x-padding-sum: 2rem; /* eg, padding: 0 1rem */
}
.youtube-embed {
--video-container-width: calc(100vw - var(--video-container-x-padding-sum));
width: 100%;
height: calc(var(--video-container-width) / var(--video-ratio));
}
#media only screen and (min-width: 672px) {
.youtube-embed {
--video-container-width: var(--video-container-max-width);
}
}
I have problem with Including video in Prestashop!
This is the code I use to Include the video:
<div class="videoWrapper">
<iframe width="640" height="360" src="https://www.youtube.com/embed/3G1PFLuTrgM" frameborder="0" allowfullscreen></iframe>
</div>
And the CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: auto !important;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
But Is not working at all!
Anyone has any idea what can I do?
Thanks!
Change default inline width and height :
<div class="videoWrapper col-md-12">
<iframe width="100%" height="450" src="https://www.youtube.com/embed/3G1PFLuTrgM" frameborder="0" allowfullscreen></iframe>
</div>
Using Bootstrap is useful and easy, try to add height to your iframe using CSS (or keep default)