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/
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 have a certain problem that I came across I need to make a video element with fixed height as well I have a canvas element that is positioned on top of the video element which represents a rectangle that is drawn across the object.
When I use object-fit with max-height: 60vh, the canvas element as well gets shrunk to 60vh but instead, it should be 100% height
.display-cover {
position: relative;
}
#video {
min-width: 100%;
object-fit: cover;
max-height: 60vh;
}
#camera-feedback {
position: absolute;
top: -30px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<div class="display-cover">
<canvas id="camera-feedback"></canvas>
<div class="video-cover">
<video id="video" autoplay playsinline>
Your browser does not support the video tag.
</video>
</div>
</div>
Image example ( yellow rectangle should cover all document), when height of the video is 100% it works fine
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
<source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm">
</video>
</div>
#mission-statement {
margin-top: 0px;
margin-bottom: auto;
height: 100vh;
width: 100vw;
}
video#bgvid
{width: 100%; height: 100%; position: relative;}
Currently I have a video in the background of this div. However currently, when the screen is really wide, there is space on the left and right and when it is really narrow, there is space on the top and bottom.
Instead, I would like the video to zoom such that it is always touching all 4 sides. If the browser is narrow, it will be zoomed such that the left and right parts of the video are cut off. If the browser is really wide, it will be zoomed such that the top and bottom are cut off.
How can I accomplish this?
If you are only concerned with real modern browsers that conform to W3C standards (i.e. Not IE), use object-fit:cover. If IE is a must, there's a polyfill, but other than that, it would take too much effort and time to force a "browser" like IE to conform when it's obvious design is to conflict with everything that's sane and logical.
View in Full page mode
Demo
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
#mission-statement {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
video#bgvid {
height: 100vh;
width: 100vw;
object-fit: cover;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="https://i.pinimg.com/originals/28/6c/00/286c004a0cc4a49a5e6985b0e0812923.gif" id="bgvid">
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
</div>
Try this:
video#bgvid {
/* 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%);
}
I am trying to hide the overflow of an HTML5 video that is wrapped in a container. However there are still scroll bars in firefox and chrome. When I try to recreate the issue in Jsfiddle, it works fine (no scrollbars), but the same code in firefox or chrome creates a scroll and does not hide any overflow.
Any idea how I can get the overflow of an HTML5 video to hide, and why it's not working? PS. I have tried changing the position of the container to various things and have tried breaking overflow: hidden down to overflow-x and overflow-y
<div class="video_container">
<video autoplay loop controls muted="true"class="video_window">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS
.video_container{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
overflow:hidden
}
video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
video{
width: 300%;
left: -100%;
}
}
This one should do the trick if you meant those annoying bars with scroll element on your DIVs. Set this to your wrapper element (e.g. .video_container)
&::-webkit-scrollbar {
display: none;
}
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.