Last active
February 3, 2021 17:44
-
-
Save ceer/43519ccf8e38b2effcc9001716b5c7e7 to your computer and use it in GitHub Desktop.
Full width modal vimeo player
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Vimeo Player Modal Test</title> | |
| <style> | |
| body { | |
| text-align: center; | |
| } | |
| #video-play-button { | |
| font-size: 5rem; | |
| padding: 15rem; | |
| z-index:0; | |
| cursor: pointer; | |
| } | |
| #movie-modal { | |
| display: none; | |
| } | |
| .movie-modal-header { | |
| position:fixed; | |
| top:0; | |
| right:0; | |
| padding : 1rem 2rem; | |
| z-index: 2; | |
| } | |
| #movie-modal-close-button { | |
| border: none; | |
| color: white; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 3rem; | |
| padding: 0.2rem 1rem; | |
| background-color: transparent; | |
| cursor: pointer; | |
| } | |
| #vimeo-video iframe { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: black; | |
| z-index:1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="video-play-button"> ▶️ </div> | |
| <div id="movie-modal"> | |
| <div class="movie-modal-header"> | |
| <button id="movie-modal-close-button"> × </button> | |
| </div> | |
| <div id="vimeo-video"></div> | |
| </div> | |
| <script src="https://player.vimeo.com/api/player.js"></script> | |
| <script> | |
| // options list: https://developer.vimeo.com/player/sdk/embed | |
| var options = { | |
| id: "48425421", | |
| //title: false, | |
| //byline: false, | |
| //controls: false, | |
| //portrait: false, | |
| playsinline: false, | |
| background: true, | |
| loop: false, | |
| muted: true | |
| }; | |
| var videoPlayer = new Vimeo.Player('vimeo-video', options); | |
| document.getElementById('video-play-button').addEventListener('click', function () { | |
| document.getElementById('movie-modal').style.display = "block"; | |
| videoPlayer.play(); | |
| }); | |
| document.getElementById('movie-modal-close-button').addEventListener('click', function () { | |
| videoPlayer.pause(); | |
| document.getElementById('movie-modal').style.display = "none"; | |
| }); | |
| videoPlayer.on('ended', function() { | |
| document.getElementById('movie-modal').style.display = "none"; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment