Created
January 28, 2019 08:23
-
-
Save shakedlokits/d4fb53d5ebfe4ba29e7b6666da07b566 to your computer and use it in GitHub Desktop.
Enabling fullscreen video
This file contains hidden or 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"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Fullscreen Video</title> | |
| <script src="https://cdn.plyr.io/2.0.7/plyr.js" charset="utf-8"></script> | |
| <link rel="stylesheet" href="https://cdn.plyr.io/2.0.16/plyr.css"> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <button type="button">Full Screen</button><br> | |
| <div id="player"></div> | |
| <script src="https://www.youtube.com/iframe_api"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| var player, iframe; | |
| var _ = document.querySelector.bind(document); | |
| // init player | |
| function onYouTubeIframeAPIReady() { | |
| player = new YT.Player('player', { | |
| height: '200', | |
| width: '300', | |
| videoId: 's8MDNFaGfT4', | |
| events: { | |
| 'onReady': onPlayerReady | |
| } | |
| }); | |
| } | |
| // when ready, wait for clicks | |
| function onPlayerReady(event) { | |
| var player = event.target; | |
| iframe = _('#player'); | |
| setupListener(); | |
| } | |
| function setupListener() { | |
| _('button').addEventListener('click', playFullscreen); | |
| } | |
| function playFullscreen() { | |
| // hide button and show video | |
| $('button').css('display', 'none') | |
| $('#player').css('opacity', 1) | |
| player.playVideo(); //won't work on mobile | |
| var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; | |
| if (requestFullScreen) { | |
| requestFullScreen.bind(iframe)(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment