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%;
}
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.
This question already has answers here:
Disable download button for Google Chrome?
(11 answers)
Closed 5 years ago.
I am getting this download button with <video> tags in Chrome 55, but not on Chrome 54:
How can I remove this so no one can see the download button in Chrome 55?
I have used <video> tag to embed this video on my web page. So, I want some kind of code to remove this download option.
Here is my current code:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Google has added a new feature since the last answer was posted here.
You can now add the controlList attribute as shown here:
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
You can find all options of the controllist attribute here:
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
This is the solution (from this post)
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
Update 2 :
New Solution by #Remo
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
As of Chrome58 you can now use controlsList to remove controls you don't want shown. This is available for both <audio> and <video> tags.
If you want to remove the download button in the controls do this:
<audio controls controlsList="nodownload">
This can hide download button on Chrome when HTML5 Audio is used.
#aPlayer > audio { width: 100% }
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
/* HIDE DOWNLOAD AUDIO BUTTON */
#aPlayer {
overflow: hidden;width: 390px;
}
#aPlayer > audio {
width: 420px;
}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
#aPlayer {
overflow: hidden;width: 390px;
}
#aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
<audio autoplay="autoplay" controls="controls">
<source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
</audio>
</div>
Hey I found a permanent solution that should work in every case!
For normal webdevelopment
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? --> Debug modus!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Let me know if it helped you out!
As for current Chrome version (56) you can't remove it yet. Solution provided in other posts leads to overflowing some part of the video.
I've found another solution - you can make the preceding button to overlap the download button and simply cover it, by using this technique:
video::-webkit-media-controls-fullscreen-button {
margin-right: -48px;
z-index: 10;
position: relative;
background: #fafafa;
background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
background-size: 35%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Example: https://jsfiddle.net/dk4q6hh2/
PS You might want to customise the icon, since it's for example only.
May be the best way to utilize "download" button is to use JavaScript players, such as Videojs (http://docs.videojs.com/) or MediaElement.js (http://www.mediaelementjs.com/)
They do not have download button by default as a rule and moreover allow you to customize visible control buttons of the player.
I solved the problem by covering the download button of a audio controller with a transparent div that changes the symbol of the mouse-cursor to "not-allowed".
The div blocks the activation of the download button.
Height: 50px, Width: 35px, Left: (document-right -60), Top: (same as the audio controller).
You must set the z-index style of the div above the z-index of the audio-controller.
See sapplic.com/jive66 for an example that works for chrome on win7 and on win8.
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>