CodePen Embed - Dome 4V

<body>
 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <figure class="video-wrapper">
<video id="video" poster="https://nexusapi-us1.dropcam.com/get_image?uuid=aca2adf4de2b4d73aea3dcb7be962d84">
</video>
  </figure>
  <figcaption>Dome 4V: a project by Philip Oakley Otto and Francesco Camuffo.
    <br>Live on June 9th.</figcaption>
  <img src="http://dome4v.com/images/dome.svg">
  <script>
        if(Hls.isSupported()) {
          var video = document.getElementById('video');
          var hls = new Hls();
          hls.loadSource('https://stream-us1-charlie.dropcam.com/nexus_aac/aca2adf4de2b4d73aea3dcb7be962d84/chunklist_w1083365994.m3u8');
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED,function() {
            video.play();
        });
       }
       // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
       // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
       // This is using the built-in support of the plain video element, without using hls.js.
        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = 'https://stream-us1-charlie.dropcam.com/nexus_aac/aca2adf4de2b4d73aea3dcb7be962d84/chunklist_w1083365994.m3u8';
          video.addEventListener('canplay',function() {
            video.play();
          });
        }
      </script>
</body>

 * {
            margin: 0;
            padding: 0;
            font-size: 3vw;
            font-family: 'Open Sans', sans-serif;
            color: black;
            text-decoration: none;
            list-style: none;
            list-style-type: none;
            box-sizing: border-box;
            max-width: 100%;
          }
          
          figure.video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            /* 16:9 */
            padding-top: 25px;
            height: 0;
          }
          
          figure.video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }

          video {
            clip-path: circle(34% at center);
          }		

          figcaption {
            padding-left: 2%;
          }

/* Play Button */
.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;
    transition: opacity 150ms;
}

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

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

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="#000"/>\
                    <polygon points="70, 55 70, 145 145, 100" fill="#000"/>\
                </svg>\
            ')
        },

        hideVideoPlayButton: function() {
            video.play()
            videoPlayButton.classList.add('is-hidden')
            video.classList.remove('has-media-controls-hidden')
   //         video.setAttribute('controls', 'controls') //video controls
        }
	}

videoMethods.renderVideoPlayButton()

This Pen is owned by Philip Oakley Otto on CodePen.

See more by @oakleyotto on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.