I'm trying to make a full width banner using html5 video I want the width to be 100vw and height roughly 400px this was my attempt;
min-width: 100vw;
width: auto;
z-index: -100;
background: url(polina.jpg) no-repeat;
overflow: none;
It didn't quite work its just full screen with overflow bars on x & y, anyone know how I can achieve this effect.
If I add a hight of 400px it just removes the video width
If you want to do this your HTML would look like
<video controls>
<source src="filename.mp4" type="video/mp4">
</video>
And then your CSS would be
video {
display: block;
width: 100%;
height: 400px;
z-index: -100;
background: red; /* Replace with the path to your background image
overflow: none;
}
Here is a demo
Related
Im using css to resize an iframe in order to maintain the aspect ratio of the iframe (as described here : Responsive video iframes (keeping aspect ratio), with only css?).
.iframe-wrapper {
position:relative;
width:100%;
height: 0;
padding-bottom:58%;
}
.iframe-wrapper iframe {
position:absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
}
However, the problem i am facing is that for very wide screens this causes the iframe height to be large and the user has to scroll to view the content, which i want to avoid. So i am looking for a way to set a maximum value for.iframe-wrapper padding-bottom based on the viewport size. Something like this but for the bottom-padding:
max-height: calc(100vh - 200px);
Is there a way to do this?
Thanks :-)
If you want to maintain the same ratio then you could add a max-width of the screen height / your ratio (as the padding-bottom is dependant on the width) to a container div:
.container {
margin: 0 auto;
max-width: 178vh;// 100 / 56
}
.framewrapper {
background: pink;
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
}
.framewrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div class="framewrapper">
<iframe src="http://blar.com" width="20" height="10" scrolling="no"></iframe>
</div>
</div>
If not you would have to add a media query and fix the padding to 100vh, but then the ratio won't stay the same.
As elements with the padding-bottom trick are unaffected by the max-height property, the most efficient way to do this is to create a media query that switches the element to a different aspect ratio depending on your current browser width, like so:
.iframe-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 58%;
}
.iframe-wrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#media (min-width: 1200px) {
.iframe-wrapper {
padding-bottom: 40%;
}
}
Recently I came across an situation of such issue of padding by % or max-padding. I found a very useful hackish way ... using of transparent image.
How it works? Foremost, I must say to use this method u need to set/definite max width/height which the container will go.
Example: You have 800x600 container + left/right padding of 50px(max)
Create 50x600 transparent image(s) ... duplicate if u need for both side.
Float your contend + padding(s) accordingly
Set padding(s) to 100% height
You now have responsive padding that scale with your main container
I'm trying to make a responsive video background like this:
HTML
<video id="bgvid" autoplay="true" loop="true" preload="auto" poster="img/code-landing-page/desktop-bg-2.png">
<source src="videos/code-promo-bg.mp4" type="video/mp4">
</video>
CSS
html, body{
margin:0px;
padding: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
video#bgvid {
position: absolute;
min-width: 100%;
min-height: 100%;
z-index: -100;
width: 120%;
height: auto;
//width: auto;
//height: 100%;
}
But when window height is big enough this solution leaves a white gap at the bottom. Is there a way to avoid it, as in www.y.co for example?
I would try this:
video#bgvid {
z-index: -100;
min-width: 100vw;
min-height: 100vh;
}
The reason behind it is when you use just height: 100vh or width: 100vw browser will fit the video to the screen and the smaller side wins. With min-* the longer side wins and due to overflow: hidden in body styles it'll be cut away. (In my tests the video didn't look distorted)
vw and vh are units where 100vw means whole width of the browser screen and 100vh whole height of the browser screen.
It might be worth looking into this post on css-tricks, there is a solution at the bottom
Try with object-fit: cover on the video tag.
Object Fit CSS
I am trying to get a YouTube video to display at 100% width and height. It seems the iframe itself is doing what I want, however, once the video plays it is only 100% width up to 1100px.
I have tried searching the web but cannot find a solution to get the video itself to be the same width as the video poster and iframe width.
Try this:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/ZLyS2wHiZM8"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Reference article
I assume your video ratio is 16:9. Maybe you can try this:
.container {
width: 100vw;
height: 56.25vw;
}
.video {
width: 100%;
height: 100%;
}
This is an example link
Your video has already a 100% width. When I make a right-click on the left or right side of the video, the context menu of the youtube video appears. Check this screenshot
I think the problem is about your video. Your video don't have the right width and height to appear correctly.
I have a simple html5 video player. I would like to stretch the video height to user screen height.
I have tried a lots of things, for ecxample this one:
height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
height : 100%; /* Internet Explorer treats as min-height. */
min-height : 100%; /* Internet Explorer ignores this. */
But its not working. There is a living demo here:
http://boxy2.com/testvideo.php?url=http://boxy2.com/3n9?download_token=e99fdb10c5a929aa30d0f497d07f260eb16b511503b4520a4bdd48385b048b88&ad=0
That's my problem when I click on fullscreen it follows only the WIDTH property and not the height. If I remove width:100%, than its' size is about 300px height even on fullsrcreen.
The correct solution to this is to use now is to use object-fit:fill via CSS on the <video> tag.
video {
object-fit: fill;
}
CSS
video { height: 100vh; min-height: 100%; }
Most videos are 16:9 ratio, so in order to increase the height to the edges of the screen, you end up with a cropped view. The closest ratio to what you want is the old TV format of 4:3.
vh and vw are layout lifesavers here's more on viewport height and viewport width.
If you're looking for a full-height sol'n that always covers content area:
demo
html
<header role="banner">
<div id="wrapper-video">
<video poster="" autoplay loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4"
type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
</video>
</div>
</header>
css
section[role="banner"] {
position: relative;
width: 100%;
}
#wrapper-video {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: -100;
}
#wrapper-video video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
edit - working in Opera
If anyone else needs it. You can set for the video this:
video {
height: 100vh;
object-fit: cover;
}
I have a div with a background image that will overlay part of the header slideshow. I want the width of the div to always be 100% of the window size, even when the user re-sizes it. The height should change based on the aspect ratio of the background image. The dimensions of the background image is 1500x406.
Here's the sample code:
HTML
<div id="wrapper" class="clearfix">
<div id="bg_img"></div>
</div>
CSS
.clearfix {
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
position: absolute;
z-index: 100;
top: 9em;
width: 100%;
height: 406px;
margin: 0 auto;
display: inline;
}
The working JSFiddle
To make an element maintain proportions you only have to use this code
<div id="some_div"></div>
#some_div:after{
content: "";
display: block;
padding-top: 100%; /* the percentage of y over x */
}
So this is how to achieve it. Demo
<div id="wrapper">
<div id="bg_img"></div>
</div>
<div class="clearfix"></div>
N.B. clearfix isn't required for this solution, OP had it in his code.
CSS
#wrapper{
position: relative;
width: 100%;
}
#wrapper:after{
content: "";
display: block;
padding-top: 27.06666%; /* 406 over 1500 */
}
#bg_img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(http://placekitten.com/1500/406);
background-size: 100% 100%;
}
This is what I've used in the past to support back to IE8. Used in conjunction with a small js plugin here that supports the filters: http://louisremi.github.io/jquery.backgroundSize.js/demo/
img {
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover')";}
background-position:50% 0;
}
I found a solution which is simple and works great for me. Create a transparent PNG for the aspect ratio you desire, e.g. 15px x 4px.
put the image within the div. Set the image's width to 100%. It will expand to the div's width and grow in the proper aspect ratio vertically, pushing the div's height down to the proper aspect ratio.
Something like this (this exact sample untested):
<div style="width: 100%">
<img src="..." style="width: 100%" />
</div>
You could, of course, do this with the other dimension (height) as well by defining it instead of width.
Simple enough. Works for me.
--
Andrew
This somewhat distorts the image, but it might be what you are looking for:
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
min-width:100%;
min-height:100%;
background-size:cover;
}