• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Full screen video coding doesn't work in safari

Participant ,
Jan 28, 2019 Jan 28, 2019

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>

Views

963

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 28, 2019 Jan 28, 2019

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

<style>

.video-wrapper { position: relative; }

.video-wrapper > video {

    width: 100%;

    vertical-align: middle;

}

.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {

display: none;

}

.video-overlay-play-button {

    box-sizing: border-box;

    width: 100%;

    height: 100%;

    padding: 10px calc(50% - 50px);

    position: absolute;

 

...

Votes

Translate

Translate
Community Expert ,
Jan 28, 2019 Jan 28, 2019

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

<style>

.video-wrapper { position: relative; }

.video-wrapper > video {

    width: 100%;

    vertical-align: middle;

}

.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {

display: none;

}

.video-overlay-play-button {

    box-sizing: border-box;

    width: 100%;

    height: 100%;

    padding: 10px calc(50% - 50px);

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    opacity: 0.95;

    cursor: pointer;

    background-image: linear-gradient(transparent, #000);

    transition: opacity 150ms;

}

.video-overlay-play-button:hover { opacity: 1; }

.video-overlay-play-button.is-hidden { display: none; }

</style>

HTML and JavaScript.

<div class="video-wrapper">

<!--CHANGE MP4 AND POSTER IMAGE TO YOUR OWN-->

<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png" controls >

<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">

</video>

</div>

<script>

var videoPlayButton,

videoWrapper = document.getElementsByClassName('video-wrapper')[0],

video = document.getElementsByTagName('video')[0],

videoMethods = {

renderVideoPlayButton: function() {

if (videoWrapper.contains(video)) {

this.formatVideoPlayButton()

video.classList.add('has-media-controls-hidden')

videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]

videoPlayButton.addEventListener('click', this.hideVideoPlayButton)

}

},

formatVideoPlayButton: function() {

videoWrapper.insertAdjacentHTML('beforeend', '\

<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\

<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\

<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\

</svg>\

')

},

hideVideoPlayButton: function() {

video.play()

videoPlayButton.classList.add('is-hidden')

video.classList.remove('has-media-controls-hidden')

video.setAttribute('controls', 'controls')

}

}

videoMethods.renderVideoPlayButton()

</script>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 01, 2019 Feb 01, 2019

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines