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; | |
| // YouTube OEMBED to retrieve title. | |
| // title, author_name, author_url available in JSON response | |
| 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 title in TextNode element - truncated to 30 char | |
| fetch(ytDataUrl) | |
| .then(res => res.json()) | |
| .then(out => | |
| document.getElementById(thisPlayerId).innerHTML = out.title.substr(0,30) + "....") | |
| .catch(err => { console.log(err) }); | |
| // Write max size poster image from ytimg.com in an 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 blank TextNode for title from fetch() - 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 clickable button overlay on poster image | |
| // Stylesheet sets play button image in .play class | |
| var playButton = document.createElement('div'); | |
| playButton.setAttribute('class', 'play'); | |
| div.appendChild(playButton); | |
| div.onclick = function () { | |
| labnolIframe(this); | |
| }; | |
| playerElements[n].appendChild(div); | |
| } | |
| } | |
| // Wait for content, then create all DIV youtube-player on page | |
| 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