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/
Related
I want to set my text background as video. Upon my trying I am not able to bring the text in front. The text always hidden behind. Another issue is that the video background is not responsive in smaller screen and it covers the whole screen. More so, it seems that the video's frame width and height are removed (e.g. doesn't play in origianl width and height reatio).
Could anyone please help me solving this problem?
HTML:
<div class="container-fluid no-left-padding no-right-padding welcome-text video-content">
<!-- Container -->
<div class="container">
<video autoplay muted loop>
<source src="assets/videos/welcome_video.mp4" type="video/mp4">
</video>
<h2>Hello, I want to display this text, and play the video on background.
</h2>
</div>
</div>
CSS:
.welcome-text {
padding-bottom: 180px;
padding-top: 180px;
}
.video-content{
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
video{
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Try putting<h2>Hello I want to play this text and play the video on the background.<h2\> before <video><video\>tags
I would also advice that parameters
Like height and width be
width:auto;height:auto;
Try to put a z-index: 2 in the text so that it comes to the front of the video.
z-index
Regarding the size of the video, you have to define a size of the div.container and the
video{
min-width: 100%;
min-height: 100%;
[...]
}
Be this example at jsfiddle
I advise you to take a look at these two articles:
video height
how to change height of the video
Bring text in front of the video:
.welcome-text {
position: relative;
/* make it position:absolute instead if you want it to be centered as shown below*/
z-index: 1;
}
Center text in the container:
.container {
position: relative;
}
.welcome-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Regarding making the video responsive and mantaining the aspect ratio, you have to figure out what's the aspect ratio. Let's say the video is 1280 x 720, then 1.78:1 is the aspect ratio. It means if the width is 100% the height should be 56%.
You can't tell the div to have 56% of the container's width, but there is a trick, you can tell it to have 56% of the width as padding:
.container {
position: relative;
height: 0;
padding-bottom: 56%;
overflow: hidden;
}
video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
I'm building a website that has an autoplaying video as the hero element, and I currently have the video set to the following css:
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto !important;
height: auto !important;
z-index: -100;
}
The purpose of which is to allow it to be full width. The fixed position is needed because the content below the video needs to be able to scroll over the video.
Unfortunately, even with the negative z-index, the video prevents you from clicking on content further down the page. It's still overlaying everything. When I right click anywhere the play, pause, unmute, etc. controls come up.
Not really sure how to keep this from happening. I've tried to play around with some of the settings, but anything (that I've tried, at least) that makes it full width ends up causing it to overlay everything.
Here's the html:
<video autoplay="" loop="" id="video-background" muted="" style="width: 100%; height: 100%;">
<source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
EDIT: Solved it with a little help from a coworker. Here's the CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1 is the parent div. The div#after_layer_slider_1 is obviously the div right after it.
Thanks for the input.
Add this CSS property
html, body {
width:100%;
height:100%;
}
Solved it with a little help from a coworker. Here's the CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1 is the parent div. The div#after_layer_slider_1 is obviously the div right after it. Needed to make the div below it overlay the video in order to avoid it from covering the whole page, even with the z-index.
Thanks for the input.
I know there are a lot of questions out there regarding this topic, however I couldn't find a proper solution.
I have a #banner element on top of my site that is 710px high.
In this #banner I have my video that should always scale like "background-size:cover". It doesn't matter if the video is cut at the top or bottom, it should just always fill the #banner element.
#banner {
position:relative;
opacity:0;
height:710px;
width:100%;
overflow:hidden;
}
#banner .video {
position: absolute;
bottom: 50%;
right: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
}
I found this code right here but it doesn't properly work for me. The video does not resize when scaling the browser-window. For me this does not work.
Also I tried to use the covervid plugin that seems to work perfect for full-background sizes but not to fit it inside a banner with fixed height.
If I use this plugin and resize the window it jumps from width to height fitting, always setting the width or either height to auto.
Any idea how to do this via css or js?
Just remove the opacity from the banner and add max-height:100% to make sure that there's no vertical scroll
DEMO
html,
body {
margin: 0;
height: 100%;
}
#banner {
position: relative;
height: 710px;
border: 5px solid tomato;
overflow: hidden;
max-height: 100%;
box-sizing: border-box;
}
#banner .video {
min-width: 100%;
min-height: 100%;
}
<div id="banner">
<video class="video" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
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;