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.
Related
When my page first loads for a split second the video loses aspect ratio before returning to normal:
I am using the HTML video tag:
<video src="https://cdn.shopify.com/s/files/1/0533/4394/4904/files/Website_Home_Page_Video_1_1.mp4?v=1617166502" muted="" loop="" autoplay="" poster="//cdn.shopify.com/s/files/1/0533/4394/4904/files/amalfi-logo-black.png?v=1616983296"></video>
CSS:
.hero video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
Source: https://amalfitiles.com/
First of all, I really like the website. The issue is that you have written your video element backwards, poster should go before so that it loads before the video.
<video controls poster=""//cdn.shopify.com/s/files/1/0533/4394/4904/files/amalfi-logo-black.png?v=1616983296"">
<source src="https://cdn.shopify.com/s/files/1/0533/4394/4904/files/Website_Home_Page_Video_1_1.mp4?v=1617166502" muted="" loop="" autoplay="" type="video/mp4">
</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%;
}
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%;
}
For some reason when I put the code below, nothing happens, the video won't show. What is weird is that everything worked fine about 5 days ago. Last night my chrome just like auto updated itself, maybe it is because of that? Please any suggestion. My code:
video {
min-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
<header>
<video autoplay loop>
<source src="" type="video.mp4">
<source src="video.mp4" type="video/mp4">
</video>
</header>
Alright so I'm trying to re-do our site using code instead of Muse... not done styling yet, still just adding the core elements. How do I recreate the video strip on this page:
http://wearethefirehouse.com (current site)
Except with it set to 100% width, in HTML? The closest thing I got was it filling up the WHOLE page bg, which I don't want.
This was done with 2 Muse plugins: one to actually 'host' the video files (responsively) on an otherwise blank 'storage' page, and a second plugin (iframe plugin) to reference that video on the index.html page.
heres the new page with the current gimpy video playing. I'd like it to fill out like it does in the first site. http://wearethefirehouse.com/firehousetest/
Here's my code for the new site:
HTML:
<video autoplay loop poster="..assets/video.png" id="bgvid" width=100%>
<source src="../assets/video.webm" type="video/webm">
<source src="../assets/video.mp4" type="video/mp4">
</video>
You can specify the size of html5 video's like this.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
#vidstrip {
position:relative;
padding-top: 0;
margin-top: 250px;
overflow: hidden;
}
.vidstrip-text {
line-height: 2.1em;
padding: 1em 4em;
color: white;
}
.vidstrip-section {
position:absolute;
top:0;
left:0;
padding: 0;
z-index:-1;
}
.vidstrip-section, #bgvid {
width:100%;
height:auto;
}
I tried to emulate Paypal
Hope this helps
http://jsfiddle.net/nr2tds1f/