Highlighted

Full screen video coding doesn't work in safari

Participant ,
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>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

196

Likes

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

Full screen video coding doesn't work in safari

Participant ,
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>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

197

Likes

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
Jan 28, 2019 0
Adobe Community Professional ,
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, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Jan 28, 2019 2
hege_d LATEST
Participant ,
Feb 01, 2019

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

Likes

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
Reply
Loading...
Feb 01, 2019 0