We Keep Coding

Responsive Iframe With Preserved Aspect Ratio [duplicate]

This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I am new to coding and community and i am trying to embed YouTube iframes responsively. So far all i do is replacing the original width value with 100%.
<iframe width="100%" height="315" src="https://www.youtube.com/embed/kXBunIe_PSw" frameborder="0" allowfullscreen></iframe>
Yes it makes it responsive since the height is static there are lots of black space. Is there any simple way to prevent this.
I prefer css solutions but javascript is also welcomed.

.videoWrapper {
position:relative;
padding-bottom:56.25%;
margin:auto;
height:0;
}
.videoWrapper iframe {
background-color:#f2f2f2;
position:absolute;
max-width:100%;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
}
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' src='https://www.youtube.com/embed/hhR3DwzV2eA' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
Let me know, if it does not work

This should help you get started.
Ref: Bootstrap
.responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.responsive iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.video {
padding-bottom: 56.25%; /* or 75% depending upon the type of video you have */
}
<div class="responsive video">
<iframe src="https://www.youtube.com/embed/kXBunIe_PSw" allowfullscreen></iframe>
</div>

Youtube video div overlay glitch

I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox

try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}

How could I contain a child div that has a height auto -- Jwplayer

When Jwplayer is initialized, they inject a class with the css of
.jwplayer.jw-flag-aspect-mode {
height: auto !important;
}
My code is
<div style="height: 80vh; width: 100%">
<div style="height: 90%; width: 100%;>
<div style="height: 100%; width: 100%;>
<!-- JwPlayer here -->
<div id="sample-video"></div>
</div>
</div>
<div style="height: 10%; width: 100%;>
<!-- actions bar here -->
</div>
</div>
<script type="text/javascript">
//psuedo code
jwplayer('#sample-video").setup({
sources: sources,
autostart:true,
width: '100%'
});
</script>
Problem is that when jwplayer injects their own css, they override the heights even if I set it manually inline or through their setup with the above mentioned class.
That in turn would cause the video player to disregard the parent and overflow below. If I can change height: auto to height: 100%;, then my expected behaviour is correct.
I've tried every answer in here and all of them listed on jwplayer's support site.

Setting the jwplayer setup options of height works. It will maintain 100% if explicitly set to do so.
jwplayer('div').setup({
height: 100%,
width: 100%
});
Run this Snippet the Plunker in full display and resize the window, it is fully responsive and will not exceed the height of it's container.
PLUNKER
##SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JW Auto Height</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js?"></script>
<style></style>
</head>
<body>
<!-- div is 80% height of this screen -->
<div style="height: 80vh; width: 100%; outline: 5px dotted red;">
<!-- section is 90% height of div -->
<section style="height: 90%; width: 100%; outline: 3px dashed blue;">
<!-- main is 100% height of section -->
<main style="height: 100%; width: 100%; outline: 1px solid black;">
<!-- jw is 100% height of main -->
<div id="jw"></div>
</main>
</section>
<!-- nav is 10% height of div -->
<nav style="height: 10%; width: 100%; outline: 2px solid grey; background: grey"></nav>
</div>
<div style="margin: 30px auto;">This is 20% of the screen's height</div>
<script>
//Real code
jwplayer("jw").setup({
sources: [{
file: "http://glvid.s3.amazonaws.com/jwp/test/3clox.mp4"
}],
width: "100%",
height: "100%"
});
</script>
</body>
</html>

since that looks more like an answer than a comment:
you may not mind height:auto!important by using as well:
.jwplayer.jw-flag-aspect-mode {
min-height:100%;
max-height:100%;
}
where you set the values to constrain the desired fixed or not fixed height value(s) of your element

Why setting percentage padding (and height) dont work in elements inside flexbox in FF

See the fiddle: http://jsfiddle.net/4E2bV/793/
.imageContainer {
position: relative;
width: 23%;
padding-bottom: 23%;
float: left;
height: 0;
margin: 1%;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
body{
display: flex;
}
On FF the items inside body have padding equals 0 - on other browsers it is properly 23% for bottom padding
Is there any workaround to use a percentage values in FF?
On Chrome and IE it works ok.

You fiddle doesn't work on my FF at all. I needed to change it to webkit-flex, like this:
body{
display: -webkit-flex;
}
Then it works exactly as in Chrome, no problem with padding.
My FF version: 28.0
My Chrome ver: 37.0.2062.120 m

Yes, sorry I misunderstood.
Try NOT to use body as the flex-container. Use a div inside of it instead, surrounding all images. I also altered the css for .imageContainer and .img quite a bit into something I think looks nice. Cute kitties by the way :-)
Here's the code (works both on Chrome and FF):
<style>
.imageContainer{
/*flex-grow:1;*/
width:10%; /*<--- use this to change the image's width */
margin:1%;
}
.cats{
display: flex;
}
img {
max-height: 100%;
max-width: 100%;
}
</style>
<html>
<body>
<div class="cats">
<div class="imageContainer">
<img src="http://placekitten.com/300/300" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/301/301" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/302/303" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/303/303" />
</div>
</div>
</body>
</html>

Scrolling iframe on mobile app jump to top of the page at some point

I have this html:
<header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a>
<h1 class="title">Page</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;">
<iframe style="height: 100%; width: 100%;" src="url"></iframe>
</div>
The iframe is scrolling down/top and right/left but when I scroll at some point it jumps to the top of the page.

Reference an object instead of an iframe
<object type="text/html" data="content-to-scroll.html"></object>
What mobile device are you using?
<header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a>
<h1 class="title">Page</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;">
<object type="text/html" style="height: 100%; width: 100%;" data="url"></object>
</div>
This has been known to work. But not always.

The iframe must have specific height and it's container some styling.
{
-webkit-overflow-scrolling: touch!important;
overflow-y: scroll!important;
height: 100%;
position: absolute;
}