Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* 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;
}
/*
* 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);
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