I have a problem with youtube iframe videos. I want the iframe to take up the 100% width of the page and maintain aspect ratio on mobile devices. I do not want the video to get bigger than its 560 width or 315 height. I then want the 2 videos to be displayed inline-block on a tablet and for the desktop. I want the iframes side by side on a tablet and desktop. I can't seem to figure this out. I have exhaustively searched this and can't find an answer that works. Here is my code.
HTML
<div class="video_responsive">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
.video_responsive{
padding-left: 1em;
padding-right: 1em;
}
.video-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
margin-top: 20px;
height: 0;
overflow: hidden;
}
.video-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Any help would be appreciated. I am doing this for a class. Professor has no idea how to fix this problem. Thanks
Update 2
OP mentioned an interest in tables. Although they can make a layout simple, it's not meant for layout, they're meant to represent data. Fortunately, there's are several display values that allow an element to behave like a table. On both demos, when in desktop mode, the posters (images displayed when video is idle) overlap and are distorted, but the video isn't.
The most important ones are:
table element will behave like <table>
table-row element will behave like <tr>
table-cell element will behave like <td>
Here's an article with tips on how to use display: table
This Plunker is using display: table/table-cell
Update 1
The code editor on this site isn't good for complex CSS so I moved the demo over to Plunker
Summary
2 major properties in use are:
media query
flexbox
Mobile mode 758px or less in width for viewport
flexbox layout is stacked (flex-flow: column nowrap)
Desktop mode 759px or more in width for viewport
media query triggers at 759px or more
flex-flow is now row nowrap
Use media query:
#media only screen and (min-width: 759px) {
.video_responsive {
display: table;
}
.video-cpntainer {
display: table-cell;
max-width: 45vw;
}
.video_responsive {
padding-left: 1em;
padding-right: 1em;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
margin-top: 20px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media only screen and (min-width: 759px) {
.video_responsive {
flex-flow: row nowrap;
}
.video-container {
min-width: 380px;
max-width: 48vw;
min-height: 214px;
max-height: 27vh;
}
}
<div class="video_responsive">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
In your CSS set max-width: 759px; for your iframe.
Related
I want to place an element above the top right corner of a Youtube Video (an iframe).
Something like this:
Note: notice the white cross on the top right corner.
The iframe is within a container and it expands until a max-width (in this example it's 20rem) and when the container is narrower, it shrinks with an aspect ratio of 16:9 (big shout out to the old-schoolers who also were forced to do this with the 52% padding trick when aspect-ratio wasn't a thing yet in CSS!)
You can see it in action here:
.container {
position: relative;
border: 0.1rem dashed tomato;
}
.video {
display: block;
aspect-ratio: 16 / 9;
width: 100%;
max-width: 20rem;
margin: 0 auto;
}
<div class="container">
<iframe class="video" src="https://www.youtube.com/embed/8o0Qao60T1Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
The question is: how do I do this?
Did I try something?:
Yes! My happpy me said, "ha, easy, just use :before". And I just learned... it won't work for an iframe.
So yeah, I'm not seeing the obvious right now, and I'll appreciate your help.
If you copy those aspect-ratio and max-width rules to an inner container, you can then have the X float relative to the video's width.
.container {
position: relative;
border: 0.1rem dashed tomato;
}
.video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 auto;
}
.inner {
aspect-ratio: 16 / 9;
max-width: 20rem;
border: 1px solid blue;
width: auto;
margin: 0 auto;
}
.inner:before {
content: "X";
display: block;
position: relative;
background: red;
text-align: right;
}
<div class="container">
<div class="inner">
<iframe class="video" src="https://www.youtube.com/embed/8o0Qao60T1Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Use This
max-width:100%;
You need to change your max-width to see video in full screen.
I am trying to embed an iFrame in a content management system which will later act as a preview function when making changes to a page. Trouble is, the iFrame won't change size, and I'm bewildered.
Video link to example: https://www.icloud.com/sharedalbum/#B0b5M7GFPGbX4Tu
How can I make the height responsive to the CSS values I'm entering? What's happening?
try this
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videowrapper">
<iframe width="853" height="480" src="-YOUR-URL-HERE-" frameborder="0" allowfullscreen></iframe>
</div>
I don't have access to my css and would like to embed a responsive YouTube video with in line CSS...
Is this possible? and could you please provide the div snippet?
Thanks
nothing complicated, check this fiddle:
http://jsfiddle.net/gwfttfze/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
edit
(based on first comment)
Use classes that are already defined in your css
<div class="product__video">
<div class="video-wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/dfSk1c6SzKw" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Is it possible using pure css to get a youtube embed to be fluid both horizontally and vertically?
Basically this means that the video aspect ratio is kept at all times, no matter the width/height of the parent. For example, if the parent div was very wide and short, the video would have gaps on both sides. If the parent was very thin and tall, the video would have gaps on the top and bottom.
This is how I do it, compliments to http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
DEMO
<div class="thumbnailContainer video_embed">
<iframe src="//www.youtube.com/embed/Kdgt1ZHkvnM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
.thumbnailContainer
{
overflow: hidden;
position: relative;
width: 100%;
}
.thumbnailContainer.video_embed
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I want to scale an iFrame through CSS to width: 100%, and the height should scale proportionally to the width.
With an <img> tag this works fine.
Both the image and the iFrame have defined width and height in the html.
Here some examples:
<html>
<style>
#a{ width: 500px; }
img{ width: 100%; height: auto }
</style>
<body>
<div id="a">
<img src="http://lorempixel.com/200/150/" width="200" height="150" />
</div>
</body>
This works great on images, but I would like the same behaviour for iFrames:
<html>
<style>
#a{ width: 900px; background: grey;}
iframe{ width: 100%; height: auto }
</style>
<body>
<div id="a">
<iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>
</body>
The iFrame renders 100% wide but does not scale it's height proportional like the image does.
Big difference between an image and an iframe is the fact that an image keeps its aspect-ratio. You could combine an image and an iframe with will result in a responsive iframe.
Hope this answerers your question.
Check this link for example : http://jsfiddle.net/Masau/7WRHM/
HTML:
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://placehold.it/16x9"/>
<iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
CSS:
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
note: This only works with a fixed aspect-ratio.
I suppose this is a cleaner approach.
It works with inline height and width properties (I set random value in the fiddle to prove that) and with CSS max-width property.
HTML:
<div class="wrapper">
<div class="h_iframe">
<iframe height="2" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
CSS:
html,body {height: 100%;}
.wrapper {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
.h_iframe {position: relative; padding-top: 56%;}
.h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
http://jsfiddle.net/7WRHM/1001/
I like this solution best. Simple, scalable, responsive. The idea here is to create a zero-height outer div with bottom padding set to the aspect ratio of the video. The iframe is scaled to 100% in both width and height, completely filling the outer container. The outer container automatically adjusts its height according to its width, and the iframe inside adjusts itself accordingly.
<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
<iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
src="http://www.youtube.com/embed/RksyMaJiD8Y">
</iframe>
</div>
The only variable here is the padding-bottom value in the outer div. It's 75% for 4:3 aspect ratio videos, and 56.25% for widescreen 16:9 aspect ratio videos.
You could use viewport units here instead of %. Like this:
iframe {
max-width: 100vw;
max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}
DEMO (Resize to see the effect)
body {
margin: 0;
}
.a {
max-width: 560px;
background: grey;
}
img {
width: 100%;
height: auto
}
iframe {
max-width: 100vw;
max-height: 56.25vw;
/* 315/560 = .5625 */
}
<div class="a">
<img src="http://lorempixel.com/560/315/" width="560" height="315" />
</div>
<div class="a">
<iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>
#Anachronist is closest here, #Simone not far off. The caveat with percentage padding on an element is that it's based on its parent's width, so if different to your container, the proportions will be off.
The most reliable, simplest answer is:
body {
/* for demo */
background: lightgray;
}
.fixed-aspect-wrapper {
/* anything or nothing, it doesn't matter */
width: 60%;
/* only need if other rulesets give this padding */
padding: 0;
}
.fixed-aspect-padder {
height: 0;
/* last padding dimension is (100 * height / width) of item to be scaled */
padding: 0 0 56.25%;
position: relative;
/* only need next 2 rules if other rulesets change these */
margin: 0;
width: auto;
}
.whatever-needs-the-fixed-aspect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* for demo */
border: 0;
background: white;
}
<div class="fixed-aspect-wrapper">
<div class="fixed-aspect-padder">
<iframe class="whatever-needs-the-fixed-aspect" src="/"></iframe>
</div>
</div>
None of these solutions worked for me inside a Weebly "add your own html" box. Not sure what they are doing with their code. But I found this solution at https://benmarshall.me/responsive-iframes/ and it works perfectly.
CSS
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
padding-top: 75%;
}
HTML
<div class="iframe-container">
<iframe src="https://player.vimeo.com/video/106466360" allowfullscreen></iframe>
</div>