My project has a video in the background, nothing fancy, pretty classic.
React
<video autoPlay loop muted className="video">
<source src={backgroundVideo} type="video/mp4" />
</video>
SCSS
.video {
position: fixed;
left: 50%;
top: 50%;
height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
width: 100%;
z-index: -1;
}
And what I wanna do is add transition, like simple cross dissolve. So that the video does not just abruptly start playing again, but as if more gently. Can I do it somehow? Maybe there is a simple CSS property that I forgot about?
Sry if that question was asked before, i can't find anything similar :(
Related
I am trying to replace my website's header with a background video and am having trouble scaling it to desired size when on mobile. After messing around, I have found the following code to be working on all browsers on desktop when placed in the home section of my page.
<video playsinline autoplay muted loop poster="https://www.matelasdepot.net/video/video-restaurant.jpg" id="bgvid">
<source src="https://www.matelasdepot.net/video/video-restaurant.webm" type="video/webm">
<source src="https://www.matelasdepot.net/video/video-restaurant.mp4" type="video/mp4">
</video>
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
max-width: none;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
overflow: hidden;
}
However, on mobile - the video doesn't scale. I'm not sure how to use #media with the video tag as every time I tried it didn't seem to impact the video at all. Does anybody have a clue on how I could fix this? Any help would be appreciated!
I have tried resizng the video with the following but it did not work
#media (max-width: 767px) {
video {
width: 300%;
height: 300%;
}
}
I'm trying to precent a video from jumping when it loads, I have applied this aspect ratio padding trick which works fine, but not when the video requires a max-width, the padding applied seems too much and never fits correctly. Any ideas?
Reference links:
https://css-tricks.com/aspect-ratio-boxes/
https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576
.video-wrap {
position: relative;
height: 0;
padding-top: calc(675 / 1200 * 100%);
}
#tutorial-video {
position: absolute;
top: 0;
left: 0;
max-width: 600px;
width:100%;
height: auto;
}
<div class="video-wrap">
<video id="tutorial-video" width="100%" poster="/assets/video-poster.jpg" autoplay loop playsinline>
<source src="/videos/tutorial.mp4" type="video/mp4">
</video>
</div>
Fiddle:
https://jsfiddle.net/ko1L84b5/2/
I've stuggled to find an answer to this problem, I would like to add controls to HTML5 background video, so that users can at least choose to pause the video for accessibility reasons. The built-in HTML5 "Controls" attribute work just fine but as soon as I add my CSS to put the video in the background, the controls disappear. How do I keep the controls and have the video in the background?
Here is my simple HTML5 code:
<div class="fullscreen-bg">
<video controls loop muted autoplay poster="Rustypic.jpg" class="fullscreen-bg-video">
<source src="Rustybeg.webm" srclang="en" type="video/webm">
</video>
</div>
Here is my CSS that puts the video in the background:
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How about something like this?
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -5;
}
<div class="fullscreen-bg">
<video controls loop muted autoplay poster="Rustypic.jpg" class="fullscreen-bg-video">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<div class="content">NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.</div>
Just a note - you don't really need the height 100% unless you want the video centered on the page for some reason.
I'm working on a site where the first thing the user see is a video. I want that video to be full screen, but to also allow scrolling.
Something like this: http://wearefetch.com/
As you can see, the video is fullscreen but you can also scroll down.
I've searched the web a bit but didn't find anything particularly helpful. If anybody can nudge me in the right direction I'd be grateful.
try this
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
HTML
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>
If screen width is bellow 800px
#media screen and (max-device-width: 800px) {
html { background: url(polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
visit here for more details
What I want to do is have an HTML5 video scale 100% width of the page, but maintain a fixed height of 650px.
The following code scales to maintain aspect ratio, which is not what I need:
<header>
<video width="100%" autoplay="autoplay">
<source src="video.webm" type="video/webm; codecs=vp8,vorbis">
</video>
</header>
I also tried a max-height="650px" but this only centres the video and leaves whitespace on either side.
What paypal does is scaling up the video according to the viewport. But they dont go mobile, and this is a problem.
So if you want to scale your video from small to big devices, you can put your video with the basic markup:
<video width="100%" height="auto">...
This is going to scale up your video. The problem is when you go to a small viewport. The video will scale down but can be too small, so you can define a min-height and use CSS transforms to scale up the video aspect:
video{
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
With media queries you can define breakpoints and scale the video for those screens.
Also with some javascript you can also define a point of focus for your video (if some area of the video is more important).
Check this link for more details on that:
http://viget.com/extend/fullscreen-html5-video-with-css-transforms
I have achieved this by wrapping it into two containers with a set height (750px i.e.), backface-visibility: hidden; and overflow:hidden; - so the video gets larger in total but is being cropped off at the bottom (thanks to https://codepen.io/dudleystorey/pen/knqyK & http://fasett.no/ ):
.header {
height:750px;
overflow: hidden;
}
video {
display: block;
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
overflow-y: hidden;
vertical-align: top;
}
.container_video {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 100%;
height: 100%;
z-index: 1;
position: relative;
}
<header class="header">
<div class="container_video">
<video preload="auto" autoplay loop muted poster="img/videobg.png" id="bgvid" src="//demosthenes.info/assets/videos/polina.mp4" ></video>
</div>
</header>