I have this iframe, which depending on the situation can contain a video, and if unavailable an image - the problem I seem to be having is that the image is not being responsive enough to scale itself based on the screen size - it just cuts off the part that is outside the container.
This is what I currently have.
.parent {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.parent__wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<iframe class="parent__wrapper" src="https://placekitten.com/566/313" frameborder="0" scrolling="no"></iframe>
</div>
https://jsfiddle.net/onze9y0a/3/
How do I make it avoid cutting the sides or buttons as the screen size changes?
Related
Ive been fiddling with a lot of informationm ive found here to overlay a transparent TV PNG over a youtube video, and have succesfully gotten it to work on desktop. However I cannot get it to align correctly when viewed on mobile devices (which will be primary viewership). Is there a way I can force different CSS values depending on the device used?
#panel {
position: relative;
width: auto;
height: 625px;
overflow: hidden;
}
#panel-tv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/tvoverlay.png') no-repeat center;
pointer-events: none;
z-index: 10;
}
#panel-content-overlay {
position: absolute;
top: 80px;
left: 24%;
width: 720px;
height: 405px;
z-index: 9;
background-color: #000;
}
#embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
<div id="panel">
<div id="panel-tv"></div>
<div id="panel-content-overlay">
<div id="panel-content">
<div id="embed-container">
<div style="width: 683px; " class="wp-video">
<iframe width="710" height="399" src="https://www.youtube.com/embed/ZI2dbyNn8PI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
It is live currently at http://nickosteel.com for your reference.
Regards
One problem I could see is that you have the tv image larger than it needs to be, meaning it becomes a bit harder. I would do the following changes.
Container (id="panel")
make this max-width to after your tv image and center it with
margin: 0 auto;
TV image
cut it so it had as much to the left as the right, so the panel width to the right, should be as much "transparent" to the left. That makes it much easier to align
use it as an image (<img />) instead of a background, that way it will become responsive and have it's natural height (and width).
set width width: 100%; (this is for the responsive part)
Video
make it responsive, look at this post for that (note you don't need any of the javascript, just html/css)
center it
with this you are good to go for a responsive solution. It would be a bit easier to give you the changes in css and html, but for that you need to have the tv image at the right size to begin with. Hope this makes sense!
Just an opinion of mine, use classes for styling and id for javascript targets.
I'm trying to maintain a videos aspect ratio in a responsive layout to prevent black edges when the layout changes size. So far, I've set up some media queries, but while re-sizing there are still some points that the video has black edges.
You can see the layout and video here http://smedia.lv/ (the SHOWREEL video).
The video is embedded from Vimeo with an iframe and it has a width and height of 100%. The video container width depends on the screen size and is also defined in %, the height is a fixed value.
How can I keep the aspect ratio of the video, so it doesn't have the black edges?
What you want is fluid width video.
Adding just a few styles to your container (.video) and the iframe will accomplish this.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
/* Adjust the max-width depending on the other styles on your site. */
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
Checkout the example below.
Note:
You can use a media query to setup a breakpoint at which point the video will grow no bigger than 964.71x410.
You will need to update the padding-bottom, .video width, and media query to reflect the correct aspect ratio of your video if it changes.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
<div class="video">
<iframe src="https://player.vimeo.com/video/120261170" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
I have a slight issue. I have a video which I would like to adjust to the browser, it shouldn't stretch, but neither should there be any with space visible
HTML:
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
CSS:
#wereldbol {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
background-size:cover;
}
background-size: cover; is causing the issue that the video would be off-center, is there any alternative way to cover the browser's full width and height? At the moment width: 100% and height: 100% don't quite fix the issue because it would leave the image to have a white bar on the left and right, eventhough the video scales correctly. Is there any way to fix this issue?
If I understand you correctly, what you are trying to achieve is keep the video’s aspect ratio, but make it adapt to its surroundings without stretching the video out of proportion. Here’s how I do it:
Wrap the video element in a div, like this:
<div class="video-wrapper">
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>
Then use the following CSS:
.video-wrapper {
position: relative;
width: 100%;
max-width: 100%;
height: 0;
padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
overflow: hidden;
border: 0;
}
.video-wrapper video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
EDIT: Here’s a plunker: Adjust the viewport-width to see how it works.
You need to either adjust the CSS to fit the exact aspect-ratio using the "aspect ratio trick" or use something like FitVids.js -- see http://fitvidsjs.com/
I usually use a similar solution to this one. Something like:
.wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.wrapper iframe {
position:absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
But this time I have no access to the HTML or JavaScript code so I can't use a wrapper to prevent the height:0.
Is there a way to make an iframe responsive (and to keep the ratio) with only CSS?
Tried this (works with the iframe but not with its content):
iframe {
width: 100%;
background: red;
height: 0;
padding-bottom: 33%;
}
fiddle
Any thoughts? No need to support old browsers so even a CSS3 solution would be great.
Here is a Fiddle for a solution, that is based on a CSS2 secret: https://jsfiddle.net/59f9uc5e/2/
<div class="aspect-ratio">
<iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>
<style>
/* This element defines the size the iframe will take.
In this example we want to have a ratio of 25:14 */
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* The height of the item will now be 56.25% of the width. */
}
/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
It is explained by how percentage-values for padding are handled:
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.
https://www.w3.org/TR/CSS2/box.html#padding-properties
Use the new CSS viewport units vw and vh (viewport width / viewport height)
FIDDLE
iframe {
width: 100vw;
height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
background:red;
}
Browser support is also good: IE9+ (caniuse)
Calc function makes it much more readable:
.iframe-video {
width: 755px;
height: 424px;
max-width: 100%;
max-height: calc((100vw - 40px) / (16/9));
}
width and height is size for desktop and also fallback to ancient browsers
40px is margin (20 px between iframe border and viewport border on both sides)
16/9 is ratio of video (if you have edge-to-edge player)
With css aspect-ratio it's easy.
iframe {
height: auto;
width: 100%;
aspect-ratio: 16 / 9;
}
<div>
<div style="position:relative;padding-top:56.25%;">
<iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen
style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>
</div>
Please add this styling to the web url content you are trying to load. It will keep the 16:9 aspect ratio.
This is kind of hackish however you can use images to preserve the aspect ratio of a video. For example I went to paint and saved an image of 1280 x 720 resolution to use for a 16:9 aspect ratio (in here I will just grab a blank image off the internet somewhere).
This works because if you change the width of an image while leaving height auto, vise-versa the image will automatically scale - keeping proportions.
img {
display: block;
height: auto;
width: 100%;
}
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.wrapper {
float: left;
position: relative;
}
<div class="wrapper">
<img src="http://www.solidbackgrounds.com/images/1280x720/1280x720-ghost-white-solid-color-background.jpg" alt=""/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
I had the same issue and this worked for me:
.wrapper iframe{
width: 100%; /* This Forces video to 100% of parent's width */
height:unset; /* This Overwrites the height attribute of Youtube's embed code */
aspect-ratio: 16 / 9; /* This adjusts video height to keep the desired aspect ratio*/
}
I have responsive background and I want to have a YouTube video over that background(not in full width).
Here I have tried doing it.
http://jsfiddle.net/audetwebdesign/EGgaN/#run
HTML:
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here's a jsfiddle forked from your fiddle that has the image as the background, as well as a responsive youtube video centered. Making the image have position:absolute takes it out of the normal flow and allows the embedded video to stay on top.
The trick for the responsive video code is to wrap the embedded video in a container with a max width, and then also adding in padding to keep the proper aspect ratio for the video. You then ensure that the iframe, object, and embded elements all fit at 100% of that container's width while also not getting any taller than the native size:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 320px;
}
http://jsfiddle.net/QRkL9/
More about the above code - http://avexdesigns.com/responsive-youtube-embed/
braican is correct, but the 56.25% on the video container will leave lots of padding after your video. Just wrap everything inside another div with a max-height of 320px and overflow:hidden to hide the extra padding;