HTML5 video poster doesn't fit mobile - css

I have a background HTML5 video on my website :
<video id="video_background" preload="auto" autoplay="true" loop="loop" poster="images/poster.png">
<source src="videos/video-1.webm" type="video/webm">
<source src="videos/video-1.mp4" type="video/mp4">
<source src="videos/video-1.ogg" type="video/ogg">
<p>Your browser does not support the video element. Try this page in a modern browser!</p>
</video>
CSS :
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
But the poster image doesn't work properly on mobile and tablet devices, it doesn't scale to fit the whole window resolution !!
My question is how I can make the poster image fit the window on any mobile / tablet device.
Screenshot : http://imgur.com/hZuKHAx
Website CSS layout : http://jossefbn.com/css/layout.css
Please help I'm stuck !!

You can fit video by width and height or stretch it(in mobile situation by media query).
Stretch
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
//stretch
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
width and height:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
width: 100%;
height: 100%;
}

Related

Odd blurry circle on safari iphone html5 videos

This weird circle appears on certain websites (picture bellow), on iphone > safari.
On the safari console i could detect that it is because of the video autoplay, but i am not able to erase it.
I've already tried (with no luck):
1- erase the controls tag
2- video::-webkit-media-controls { display:none !important; }
Thanks-a-bunch
This is a clip of the code:
<div style="position: relative;">
<div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-image: none; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;">
<video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; width: 855px; height: auto;"><source src="video_5.mp4" type="video/mp4"></video>
</div>
</div>
Couple years late, but this worked for me:
video::-webkit-media-controls-start-playback-button { display: none; }

Make video fit 100% with any screen resolution

I have a video with the following properties, Frame width: 1920 and Frame Height: 1080. I need its width and height to be 100% thus filling up the whole screen. And it needs to be responsive too. So far, I have this code :
<video class="hidden-xs hidden-sm hidden-md hidden-custom videosize embed-responsive-item" autoplay="autoplay" loop="loop">
<source src="~/Videos/myvideo.mp4" type="video/mp4" />
</video>
css:
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100vh;
}
With the code above it fits perfectly with a 1680 x 1050 screen resolution, however with other resolution, it takes up 100% of the height then the width adjusts leaving white spaces on both sides.
Any idea ? Thanks.
Found a good solution here: http://codepen.io/shshaw/pen/OVGWLG
So your CSS would be:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
HTML:
<div class="video-container">
<video>
<source src="~/Videos/myvideo.mp4" type="video/mp4" />
</video>
</div>
You can now use the object-fit property. This property has been designed especially to manage responsive size for <img> and <video> elements. It is now supported by all modern browsers.
.videosize {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This worked for me.
I Set the height of the video Tag and it solved the problem:
<video height="600" autoplay="true" loop="true" muted="true" plays-inline="" style="position: absolute; right: 0; top: 0; min-width:100%; z-index: -100; object-fit: cover;">
<source src="assets/vid/grapes.mp4" type="video/mp4"> </video>
This worked amazingly: https://css-tricks.com/fluid-width-video/
video {
/* override other styles to make responsive */
width: 100% !important;
height: auto !important;
}
Can you use an iframe?
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="URL" frameborder="0" style="border:0"></iframe>
</div>
Using object-fit: cover; was my solution.
As of 2021 it is supported by all major browsers.
object-fit support
CSS Example:
.video-wrapper {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.video-wrapper video {
object-fit: cover;
}
I know it's an old post but I guess this can help?
*{
margin: 0 !important;
}
html{
height: 100vh;
}
body{
height: 100%;
overflow: hidden;
}
.wrapper{
width: 100%;
height: 100%;
}
.wrapper video{
height: 100%;
width: 100%;
background-color: red; /* I added bg color here so you can see how the video cover the page */
}
<div class="wrapper">
<video>
<source src="video.mp4" type="video/mp4">
</video>
</div>

Full screen background video with HTML5

I'm using the html5 video to display a background video for a site I'm building. I want it to fill the whole screen and be responsive, but there seems to be a gap in the bottom.
.video {
position:absolute;
height:100% !important;
width:100%;
top:0;
right: 0;
left:0;
bottom:0;
}
video{
position:absolute;
width:100% !important;
max-height: 100% !important;
background-size: cover;
}
<div class="video" >
<video autoplay loop poster="../img/grazing.jpg" class="fillWidth">
<source src="../videos/CowType.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="../videos/CowType.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</div>
And here is a link to the site:http://capelos.gonzbergagency.com/prime.html
Try this CSS for the video
video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
background-size: cover;
}
be sure to delete this from the existing video CSS
video{
width: 100% !important;
max-height: 100% !important;
}
This is what you need:
html,
body,
div,
video {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.video {
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

Html5 video background, keep center of video in center

I am trying to keep a background video centered regardless of how big the user drags the video. It's currently cutting off the right side of the videos when i scroll smaller. Here's what I have:
<section id="home">
<div class="video_shader"></div>
<div class="video_contain">
<video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
<source src="/realWebm.webm" type="video/webm" />
<source src="/realdeal.mp4" type="video/mp4">
<source src="/reaOg.ogv" type="video/ogg" />
</video>
</div>
</section>
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
I would like the center of the video to be the center of the page always, even if the sides get cut off - that's actually ideal if it happens that way. Would appreciate any help. Thanks for reading!
here's how I typically do background video, and how I did it for the stre.am landing page:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
This is much shorter and worked for me.
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
In my use case where I always wanted the video to cover the entire viewport (no matter if the viewport aspect ratio was bigger or lower than the videos), the above solution didn't work exactly how i intended. Instead, the following worked much better:
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
#media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}
My video was 1920x1080, and this works in IE11 (didnt test lower) and beyond.
.bg-video-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-video-wrap > video,
.bg-video-wrap > iframe {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
Late to the party but I wanted to give a 2020 answer. Here's a simple solution that lets you have an HTML video both centered and responsive without being "fixed" positioned. It lets you start with a fullscreen intro and add some text right when you start scrolling. No scrollbars, no annoying things. As simple as that.
https://codepen.io/LuBre/pen/GRJVMqE?editors=1100
CSS
* {
box-sizing: border-box;
}
body, html {
margin: 0;
height: 100%;
font-Family: Arial;
}
.video-container {
display: grid;
justify-items: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
position: absolute;
z-index: 1;
top: 50%;
left:50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
.video-text {
z-index: 2;
color: #fff;
text-align: center;
}
.video-container h1, .video-container h2 {
margin: 0;
font-size: 3rem;
}
.video-container h2 {
font-size: 1.4rem;
font-weight: normal;
opacity: 0.6;
}
.page-content {
line-height: 1.4rem;
padding: 2rem;
}
HTML
<div class="video-container">
<video autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="video-text">
<h1>Catchy title</h1>
<h2>Everyone loves catchy titles</h2>
</div>
</div>
<div class="page-content">
<h1>New paragaph</h1>
Some random text goes here...
Use object-fit: cover;
video {
position: absolute;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
}
just center it like any other element with position absolute
.video_contain {
position: absolute;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
transform: translate(-50%);
}
This worked for me
.video_contain {
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: none;
}
#bgvid {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
width: 1267px;
height: auto;
}
This did the trick for me, keeping the video centered all the time and not worrying about the actual dimensions of the video
.video_contain {
position: absolute;
top: 0;
left: 0;
/** could be any size **/
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
video {
display: block;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
So I tested above solutions and couldn't find that one, so here is mine:
video {
position: fixed;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(50%, -50%);
}

HTML5 video as background

I'm trying to use an html5 video as a background for a single full page site however in chrome the video initially loads on top of all of the content until the user attempts to scroll.
The styles for the CSS are below
video#bgvid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
background: url(../images/video-fallback.jpg) no-repeat;
background-size: cover;
}
Sample on how content is laid out on the site (the bg is set with a transparent color so the interior content is placed outside of it)
.header-bg {
width: 100%;
height: 150px;
background-color: #000;
z-index: 5;
position: absolute;
top: 0;
left: 0;
opacity: .7;
-webkit-opacity: .7;
-moz-opacity: .7;
}
header {
position: relative;
z-index: 10;
width: 100%;
height: 150px;
text-align: center;
}
HTML
<video autoplay loop poster="images/video-fallback.jpg" id="bgvid">
<source src="teaser.mp4" type="video/mp4">
<source src="teaser.ogv" type="video/ogg">
</video>
<div class="header-bg"></div>
<header>
<img src="images/logo.png">
</header>
Any idea on why the video is loading on top of the content in chrome?

Resources