I have some divs with background videos on my website, but for some reason on Mac (firefox and safari) they're all appearing with a weird green tint. I'm including them as ordinary videos and not altering the colors in any way, and they work fine on all browsers on windows. Here's the HTML:
`<div class="container-fluid splash">
<video autoplay loop class="video-background" muted plays-inline>
<source src="splashpage.m4v" type="video/mp4">
</video>
</div>`
And the CSS:
.splash {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
And here's what it looks like on the site:
background video
Related
I have a basic example of using the track element to load captions. In Firefox, the captions render sometimes, but not other times. Things that I have checked:
CSS positioning of video element (still see the issue with no positioning change)
Opening a private window (sometimes makes them show)
Disabling cache
CORS headers of mp4/vtt server (they are set to Access-Control-Allow-Origin: *) and the video tag has crossorigin="anonymous"
Changing autoplay and muted attributes
Reproduced intermittently in Firefox versions 97.0 and 98.0b4. I haven't noticed this issue in other browsers.
Edit: I added some CSS to this snippet that makes the issue repro for me now. So it's pointing to CSS, but weirdly, once I reproduce it, the captions continue to remain hidden even when I remove all styles.
.modal {
display: flex;
flex-direction: column;
}
.video-wrap {
flex-grow: 1;
height: 480px;
position: relative;
}
video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
::cue {
color: pink;
}
<div class="modal">
<h1>Video w/ VTT</h1>
<div class="video-wrap">
<video controls muted crossorigin="anonymous">
<source
src="https://cuttle-learning.netlify.app/onboarding-sketch/videos/onboarding2.mp4?cachebreak=001"
type="video/mp4"
/>
<track
label="English"
kind="captions"
srclang="en"
src="https://cuttle-learning.netlify.app/onboarding-sketch/videos/onboarding2.vtt?cachebreak=001"
default=""
/>
</video>
</div>
</div>
Demo also here: https://h05uh.csb.app/
Sounds like it's this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1733232
That's currently the most minimal example I have which consistently
fails. Some (basic) examples fail after a couple of reloads. I assume
that's because of caching and layout complexity.
I am currently using a video as a background for my website, it works perfectly in my chrome browser, but when I use safari- it shows the video controls for the video in the background. Is there any way to hide these controls or maybe just a better way to have the video in the background?
here's my code for the background video
HTML
<video id = 'home-bg' src = {require('../assets/leojaden-video-bg-2.mp4')} muted loop autoPlay playsinline/>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#home-bg{
position: absolute;
filter: brightness(80%);
top: 0;
left: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
z-index: -1;
}
video::-webkit-media-controls {
display: none;
}
I am using reactjs for this website, so a react friendly solution would be helpful! :)
You can hide the controls by not adding the controls attribute to the video element.
<video autoplay playsinline></video>
I currently have this html code:
<video playsinline="playsinline" autoplay loop="" preload="auto" muted poster="" class="fullscreen-bg__video">
<source src="my video url" type="video/mp4">
</video>
This code works perfectly on every browser including for mobile. It even works for in Instagram's own in-app web browser when you tap on a link/open something in their app. However this doesn't work for TikTok's own in-app web browser. Didn't find much resources on this especially debugging in-app web browsers so any help is much appreciated!
Don't think this is needed but here is my css code as well:
.fullscreen-bg__video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -100;
}
/* new div */
.cover {
width: 70%;
height: 100%;
}
So I've searched all around for an answer and have had no luck...so here I am! I used an html5 video element as a background and it worked fine on web and mobile...until recently. I've tried adding all the attributes for compatibility and I'm pretty sure the CSS is fine, but I will include both here for reference.
HTML
<video playsinline muted autoplay loop poster="/media/images/still.png">
<source src="/media/videos/backgrounds/strawberry.mp4" type="video/mp4">
<source src="/media/videos/backgrounds/strawberry.webm" type="video/webm">
<source src="/media/videos/backgrounds/strawberry.ogv" type="video/ogg">
</video>
CSS
video {
display: block;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 60vh;
opacity: 0.9;
z-index: -100;
}
The only thing I remember changing recently was the video formats. It used to only be .m4v, but converted them to what you see now for easier streaming.
You can check the website at http://www.soft-riders.com on your mobile to verify. Any help is appreciated!
Disabling "Low Power" Mode on the iPhone seems to fix the autoplay issue.
I have been building an app recently and have a loading animation playing at the start (just a mp4 video - for aesthetic purposes). It works great everywhere apart from on Iphone.
The issue is that there is a grey line around some of the video - not the same on every side. If i try to screenshot the page the lines are no longer visible.
I am using an iphone 7 plus and ios safari. To see for yourself see - https:pathfinder-new.herokuapp.com
The goal is for it to be seamless with the white background - example can be seen on desktop at above address.
Cheers,
Tim
I’ve been struggling for a few hours and found this as the only way to remove it (tested on Safari, Chrome and Firefox on iOS):
video {
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
Took inspiration from this gist
I tried that on iOS 12 installed iPad WiFi 2017 on Safari and things were all good. Do you have any chance to video that glitch with another recording device?
Edit: General appearance cleaner -webkit-appearance: none may do the trick.
I had to go with the approach of a wrapper div and a position absolute one, something like:
HTML
<div class="wrapper">
<video loop muted autoplay playsinline>
<source src="./video.mp4" type="video/mp4">
<source src="./video.webm" type="video/webm">
<source src="./video.ogv" type="video/ogg">
</video>
<div class="video-ios-border-fix"></div>
</div>
CSS
.wrapper {
display: block;
position: relative;
font-size: 0;
}
.video-ios-border-fix {
position: absolute;
z-index: 1;
box-sizing: initial;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border: 4px solid #fff;
}
video {
width: 100%;
}