Last active
May 16, 2025 07:09
-
-
Save mheland/1fc280248e40cbe08c1f36c20f879cc1 to your computer and use it in GitHub Desktop.
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
| /* | |
| * Light YouTube Embeds by @labnol | |
| * Credit: https://www.labnol.org/ | |
| * Video title oauth added by @kmhelander | |
| */ | |
| .youtube-player { | |
| position: relative; | |
| aspect-ratio: 16 / 9; /* Modern browsers https://caniuse.com/mdn-css_properties_aspect-ratio */ | |
| width: 100%; | |
| overflow: hidden; | |
| background: #000; | |
| margin: 5px; | |
| } | |
| .youtube-player iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 100; | |
| background: transparent; | |
| } | |
| /* Poster image */ | |
| .youtube-player img { | |
| object-fit: cover; | |
| display: block; | |
| left: 0; | |
| bottom: 0; | |
| margin: auto; | |
| max-width: 100%; | |
| width: 100%; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| border: none; | |
| height: auto; | |
| cursor: pointer; | |
| -webkit-transition: 0.4s all; | |
| -moz-transition: 0.4s all; | |
| transition: 0.4s all; | |
| } | |
| .youtube-player img:hover { | |
| -webkit-filter: brightness(75%); | |
| } | |
| /* Play button on poster image */ | |
| .youtube-player .play { | |
| height: 179px; | |
| width: 179px; | |
| left: 50%; | |
| margin-top: 30%; | |
| position: relative; | |
| background: url('../images/yt-play5-sq.png') no-repeat; | |
| cursor: pointer; | |
| transform: translate(-50%, -50%); /* Responsive... */ | |
| } | |
| .youtube-player .videotitle { | |
| position: absolute; | |
| font-size: clamp(0.9rem, 2vw, 1.3rem); | |
| color: white; | |
| text-shadow: 1px 1px black; | |
| left: 10px; | |
| top: 10px; | |
| } |
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
| /* | |
| * Light YouTube Embeds by @labnol | |
| * Credit: https://www.labnol.org/ | |
| * Title from YT oauth by @kmhelander | |
| */ | |
| function labnolIframe(div) { | |
| var iframe = document.createElement('iframe'); | |
| iframe.setAttribute( | |
| 'src', | |
| 'https://www.youtube-nocookie.com/embed/' + div.dataset.id + '?autoplay=1&rel=0' // No Cookie URL... | |
| ); | |
| iframe.setAttribute('frameborder', '0'); | |
| iframe.setAttribute('allowfullscreen', '1'); | |
| iframe.setAttribute( | |
| 'allow', | |
| 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' | |
| ); | |
| div.parentNode.replaceChild(iframe, div); | |
| } | |
| function initYouTubeVideos() { | |
| var playerElements = document.getElementsByClassName('youtube-player'); | |
| for (var n = 0; n < playerElements.length; n++) { | |
| var videoId = playerElements[n].dataset.id; | |
| let ytDataUrl = 'https://www.youtube-nocookie.com/oembed?format=json&url=http%3A//youtube.com/watch%3Fv%3D' + videoId; | |
| // fetch() is async, each player on page must have unique ID | |
| let thisPlayerId = "playerid-" + n.toString(); | |
| // Fetch the JSON from Youtube and write the video title in TextNode element | |
| fetch(ytDataUrl) | |
| .then(res => res.json()) | |
| .then(out => | |
| document.getElementById(thisPlayerId).innerHTML = out.title.substr(0,30) + "....") | |
| .catch(err => { console.log(err) }); | |
| // get the poster image in a IMG element | |
| var div = document.createElement('div'); | |
| div.setAttribute('data-id', videoId); | |
| var thumbNode = document.createElement('img'); | |
| thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace( | |
| 'ID', | |
| videoId | |
| ); | |
| div.appendChild(thumbNode); | |
| // Create TextNode for title with CSS class videotitle | |
| var videoTitle = document.createElement('div'); | |
| var titleNode = document.createTextNode(' '); | |
| videoTitle.setAttribute('class', 'videotitle'); | |
| videoTitle.setAttribute('id', thisPlayerId); | |
| videoTitle.appendChild(titleNode); | |
| div.appendChild(videoTitle); | |
| // Create the play button overlay on poster image | |
| var playButton = document.createElement('div'); | |
| playButton.setAttribute('class', 'play'); | |
| div.appendChild(playButton); | |
| div.onclick = function () { | |
| labnolIframe(this); | |
| }; | |
| playerElements[n].appendChild(div); | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', initYouTubeVideos); |
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
| YouTube IFRAME embed for faster page loads in privacy enhanced mode |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to use