Skip to main content
M
Maridenden
Participant
October 7, 2019
Question

Video player without buttons

  • October 7, 2019
  • 2 replies
  • 444 views

I'm using Dreamweaver CC 2014. I'm looking for an extesion or code that would play a self playing video, movie in a container without any player's buttons. 

Thank you

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 7, 2019

The rule of thumb with media is ALWAYS allow users to decide.  For this reason "Autoplay" of audible  media is not supported by all browsers.   Also, when you take away player controls, many people including myself will never know  your site contains media.  We see only a static image with no way to play it.

 

MDN Autoplay Guide

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

 

This way, the play button is obvious to everyone.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
</head>
<body>
<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>
</body>
</html>

 

 

Nancy O'Shea— Product User & Community Expert
    P
    Paul-M
    Legend
    October 7, 2019

    You need controls for device/browsers that do NOT support autoplay - for a lot of devices the sound is muted too. There a re a lot of other considerations but this is a basic example.

     

    <video style="min-width:100%; min-height:100%;" playsinline autoplay loop muted controls>

         <source type="video/mp4" src="/video/test.mp4>

         <source type="video/webm" src="video/test.webm">

    </video>

    Paul-M - Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices