Copy link to clipboard
Copied
I have HTML and CSS to make a fullscreen video in MUSE. It will not show in safari It works in chrome...I have heard that sometimes it helps just to make a minor change in coding...
I can not get the widgets to work in safari neither, and I would prefer to use coding.
This is the codes:
HTML
<div class="vid">
<video muted loop autoplay>
<source src="assets/reversecount.mp4" type="video/mp4">
Sorry - your browser doesn't support video
</source>
</video>
</div>
CSS
<style>
.vid {
position: relative;
width: 100%;
height: 100vh:
}
.vid video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
min-height: 100%;
min-with: 100%;
}
</style>
Your code is broken. But more importantly autoplay & loop are not supported by all browsers & devices.
Try this instead. It works in all browsers.
CSS
Copy link to clipboard
Copied
Your code is broken. But more importantly autoplay & loop are not supported by all browsers & devices.
Try this instead. It works in all browsers.
CSS
HTML and JavaScript.
Copy link to clipboard
Copied
WOW! You are GOOD! Thank you so much. And because you were so kind to hand me a finger I am now grabbing for the rest of your arm:) With one additional question: Is there a way to avoid the control bar in eg. safari? I would like, when the movie stops, to scroll some text from the bottom, and that control bar kind of ruin the look...
But no matter what - I am so grateful for your great help!!
Big smile from Hege, Denmark