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>
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 )
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.
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.
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'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);
}
}