I'm trying to create a responsive iframe. I added the padding-bottom: 56.25% and witdh/height: 100%.I don't want it to fit all the screen because it's too big, so I put width/height: 75%. The problem comes here: it creates an empty space under the iframe where I can't put anything. How can I solve it?
<div class="container">
<iframe src="https://www.youtube.com/embed/cZ_eoZdxv_Q" class="responsive-iframe"
frameborder="0" allow="accelerometer; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.container
{
position: relative;
overflow: hidden;
margin-top: 0;
padding-bottom: 56.25%;
height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.container iframe
{
position: absolute;
top: 0;
bottom: 0;
width: 75%;
height: 75%;
}
If you want to keep the aspect ratio of the video the white space cannot be removed, otherwise you would see the black space of the player. (like in this codesandbox that I've made).
My advice is to center the video so the spaces above and below will be equal.
Related
I'm trying to get a dynamically resizable 2x2 mosaic of YouTube videos, But I'm not able to get the CSS correct for the containers to adjust in a 2x2 fashion. They either don't rezise or they just get on top of each other.
This is what I have:
body {
background-color: #404040;
color: lightgrey;
}
div.container {
max-width: 1130px;
/* width: 100%;*/
border: 1px solid black;
}
div.container.mosaic {
/*position: relative; /* new */
margin-bottom: 5em;
padding: 2em;
}
.video {
margin: 0 auto;
text-align: left;
padding: 0;
width: 50%;
}
/* vc = video-container */
.vc {
position: relative;
padding-bottom: 56.25%;
padding-top: 10px;
height: 0;
overflow: hidden;
}
.vc iframe {
/* aspect-ratio: 16/9; /* NEW CSS: 16:9 Aspect Ratio */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>YT Mosaic</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>YouTube Mosaic</header>
<h2>YouTube Containers</h2>
<p>We want to create a dynamically resizable 2x2 mosaic of youtube videos...</p>
<p>With just iframe's, they don't resize correctly.</p>
<div class="mosaic">
<iframe width="560" height="315" src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
<hr>
<p>With video-containers they end up stacked in a column and not in a row.</p>
<div class="video">
<div class="vc"><iframe width="560" height="315" src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe></div>
<div class="vc"><iframe width="560" height="315" src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
</body>
<footer>Test Page Footer</footer>
</html>
Also I don't want the video containers to be larger than width="560" height="315".
There is also a new CSS for setting aspect ratio, as commented out.
I don't want any external dependencies.
How can I get a 2x2 mosaic to resize the containers with browser window, given these limits?
Some related but not applicable answers:
How can i resize the interface of the iframe youtube video?
How can I make the YouTube player scale to the width of the page but also keep the aspect ratio?
Automatic height when embedding a YouTube video?
YouTube embed dynamic size with min and max size
As commented, a possible option:
You can use a grid system and aspect ratio to size your cells and iframes : example codepen.io/gc-nomade/pen/jOxQGgN (added gap & borders, all videos into a single container to make it easy to test. with a max-height/width so it stands in the viewport and resize itselves)
.mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
max-width: 100%;
max-height: 100%;
aspect-ratio: 16/9;
margin: auto;
gap: 1em;
}
iframe {
width: 100%;
height: 100%;
display: block;
background: yellow;
border: solid red;
}
body {
margin: 0;
padding: 1em;
height: 100vh;
box-sizing: border-box;
}
<div class="mosaic ytb">
<iframe src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
Ressources
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout / https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/gap (available for flex, grid and column CSS )
I am trying to create this website for my friends squarespace website. I am having trouble positioning this video in my grid... can someone help? It keeps overlaying over other content... not sure what to do. It either overlays with other content, or cuts/crops the video. I just want a very simple layout, all of the elements centered cascading down the page. I am not sure if its better to use flex box or grid... but the iframe is proving to be a problem. I want to make it responsive, which is why my CSS is the way it is... do I need to use media queries to fix this?
CSS:
.container{
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
}
.musicvideo {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
margin: -1px
display:grid;
grid-row: 5 / 10;
}
/* Then style the iframe to fit in the container div with full height and width */
.iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
display: grid;
grid-row: 5 / 10;
}
HTML:
<div class="musicvideo">
<iframe class="iframe" src="https://www.youtube.com/embed/_AUP9FVIYl4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
So I am trying to add a Twitter iframe to my website's home page. I want the iframe to align to the left inside of the div container. The problem is, whenever I align it to the left, it spills out of the div yet when I align to the right, it fits perfectly.
Can someone please explain to me why this is happening? And how to fix it?
This is the code I am using for the div/iframe:
<article>
<div class="container">
<iframe src="https://www.twitter.com" width="270" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</article>
This is the CSS I am using to style:
.container {
background-color: #FFFFFF;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 1200px;
display: absolute;
}
iframe {
float: left;
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
I just want it to fit inside of the div on the left, not at the very edge or spilling out. Also, I am using Chrome, but I notice my iframe doesn't display on Edge, is there a reason for this? I don't get any errors, it just comes up as a blank, gray box.
I may have this solved soon, so I thank everyone in advance who has any advice to offer!
If you look at the iFrame CSS it contains margin-left: auto and margin-right: auto. You then have a float left. Margin auto on left and right will center the element. Remove the margin-left: auto. You also have text-align: center...
I'm not sure if this was a typo when writing this question or not, but there is no absolute value for the display property.
Switching display to position results in this:
.container {
background-color: blue;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 1200px;
/* Removed "display: absolute;" */
position: absolute;
}
iframe {
float: left;
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
<article>
<div class="container">
<iframe src="https://www.twitter.com" width="270" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</article>
which sounds like what you're looking for as it prevents the iframe from overflowing. Of course, there are other ways to align things to the right or left, such asflexbox.
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 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)