Created
April 9, 2017 21:32
-
-
Save simondell/a406766a062b77dfdde5424ff56250ec to your computer and use it in GitHub Desktop.
A friend asked me how to provide a custom poster image for a youtube video. The API doesn't permit this (and you'd likely have to be the video owner even if it did). My friend's research suggested setting the player's iframe opacity to 0 at load, and then 1 when the video plays. This seems to work. A noticeable delay occurs before the video load…
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> | |
| <head> | |
| <title>Transparent YT player experiment</title> | |
| <meta charset="UTF-8"> | |
| <style> | |
| #wrapper { | |
| position: relative; | |
| width: 640px; | |
| height: 390px; | |
| } | |
| #wrapper iframe, | |
| #wrapper div { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| #wrapper iframe { | |
| opacity: 0; | |
| } | |
| #my-own-content { | |
| background: | |
| linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px, | |
| linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px), | |
| linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px); | |
| background-color:#e1ebbd; | |
| background-size: 128px 128px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #my-own-content p { | |
| background-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Own poster image</h1> | |
| <div id="wrapper"> | |
| <div id="my-own-content"><p>Put your own content, e.g. your ideal poster image, in a layer behind the video player.</p></div> | |
| <div id="player"></div> | |
| </div> | |
| <aside> | |
| <h2>Some handy links</h2> | |
| <ul> | |
| <li><a href="https://developers.google.com/youtube/iframe_api_reference">The YT iFrame API</a></li> | |
| <li><a href="https://developers.google.com/youtube/player_parameters?playerVersion=HTML5">YT player parameters</a></li> | |
| </ul> | |
| </aside> | |
| <script> | |
| // 2. This code loads the IFrame Player API code asynchronously. | |
| var tag = document.createElement('script'); | |
| tag.src = "https://www.youtube.com/iframe_api"; | |
| var firstScriptTag = document.getElementsByTagName('script')[0]; | |
| firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
| // 3. This function creates an <iframe> (and YouTube player) | |
| // after the API code downloads. | |
| var player; | |
| function onYouTubeIframeAPIReady() { | |
| player = new YT.Player('player', { | |
| height: '390', | |
| width: '640', | |
| videoId: '1i-L3YTeJJM', | |
| events: { | |
| 'onReady': onPlayerReady, | |
| 'onStateChange': onPlayerStateChange | |
| } | |
| }); | |
| } | |
| // 4. The API will call this function when the video player is ready. | |
| function onPlayerReady(event) { | |
| // event.target.playVideo(); | |
| } | |
| // 5. The API calls this function when the player's state changes. | |
| // The function indicates that when playing a video (state=1), | |
| // the player should play for six seconds and then stop. | |
| var done = false; | |
| function onPlayerStateChange(event) { | |
| if (event.data == YT.PlayerState.PLAYING && !done) { | |
| document.querySelector('#wrapper iframe').style.opacity = 1; | |
| setTimeout(stopVideo, 6000); | |
| done = true; | |
| } | |
| } | |
| function stopVideo() { | |
| player.stopVideo(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment