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 )
Related
I have an iFrame on my website for a vimeo video that I don't want to be full screen. It's taking up the entire size of the page at 1046 x 588.38 px.
I have tried adjusting the height and width in the embed code to no avail. If I change the percentages in CSS it will break or become too small and still not respond to the height or width values.
HTML is as follows:
<section class="vid">
<div class="responsive">
<iframe width="640" height="360" src="https://player.vimeo.com/" frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
The possible offending css is as follows:
.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }
.responsive iframe {
display: block;
position: absolute;
width: 100%;
height: 100%; }
you don't need to use width and height in .responsive iframe,
you can set the width and height inside the iframe element
.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }
.responsive iframe {
display: block;
position: absolute;
/* width: 100%;
height: 100%; */
}
<section class="vid">
<div class="responsive">
<iframe width="640" height="200" src="https://player.vimeo.com/" frameborder="0"allow="autoplay"></iframe>
</div>
</section>
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>
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 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)