How can I achieve video fluid width?
I tried to use the example for fluid width video and it works for video, but the other content type (plain text comment) should not be indented and now they get indented, resulting in a big break nothing with each comment is video. Can you tell me how I can fix the layout so that all elements are fluid and responsive?
.abstract{
}
.abstract-inner {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.abstract-inner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Html
<div class="abstract-container">
<div class="abstract">
<div class="abstract-inner">
<iframe width="512" height="288" src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
</div>
Above is a snippet, but I made a fiddle if that helps. Maybe you know what I should do to make the video perceive the liquid and place the text correctly?
If I only use this CSS, then all the edges except the height of the too small video:
.abstract{
}
.abstract-inner {
}
.abstract-inner iframe{
min-width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
max-height:100% !important;
}
If I use CSS View Nodes the page looks correct on a fiddle but combined with my other code then the video will blow up more than the page.
In this script, the issue is reproduced with CSS viewports when the page is changed to match the left menu as well.
source to share
In this case, I used CSS View Nodes .
The code also becomes much simpler. (You may also find that some of the shell elements are no longer needed)
iframe {
width: 100%;
height: 56.25vw; /* 16:9 ... 56.25vw means 56.25% of the viewport width*/
}
What is it.
Updated script (Resize to make sure iframe maintains aspect ratio)
Note:
If you want the iframe to take up a certain% of the viewport width (say 80%), you can still do that while maintaining the correct aspect ratio on the iframe.
FIDDLE (resize viewport width)
iframe {
width: 100%;
height: 56.25vw;
/* 16:9 ... 56.25vw means 56.25% of the viewport width*/
}
aside {
width: 20vw;
height: 100vh;
background: aqua;
display: none;
}
@media screen and (min-width: 900px) {
aside {
display: table-cell;
}
iframe {
width: 80vw;
height: 45vw;
/* 9/16 * 80 = 45 */
}
.content {
display: table-cell;
vertical-align: top;
}
.wpr {
display: table;
}
}
<div class="wpr">
<aside>blabla</aside>
<div class="content">
<iframe src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p>content here</p>
<p>content here</p>
<p>content here</p>
</div>
</div>
source to share
I think you can do something like this like this
window.onresize = function(event) {
updateiframeSize()
};
function updateiframeSize() {
$(".abstract-inner").each(function(){
$this = jQuery(this);
var ratio_cont = $this.width()/$this.height();
var $iframe = $this.find("iframe");
var ratio_iframe= $iframe.width()/$iframe.height();
if (ratio_cont > ratio_iframe)
{
$iframe.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$iframe.css({"width": "auto", "height": "100%"});
}
});
};
if you want to try in css
iframe{
width: 100% !important;
height: auto !important;
}
if you want to keep aspect ratio then set width: 100% and height: auto
if you want to cover the whole parent element then height: 100% and width: 100%
source to share