Use your own custom thumbnail or the thumbnail from YouTube when embedding a YouTube video on a page.
A Pen by Dennis Lahay on CodePen.
<div class="youtube-container"> | |
<h2>With custom image</h2> | |
<div class="youtube-player" data-id="NsUWXo8M7UA" data-thumbnail="https://images.unsplash.com/photo-1574158622682-e40e69881006?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"></div> | |
</div> | |
<div class="youtube-container"> | |
<h2>With Youtube Thumbnail</h2> | |
<div class="youtube-player" data-id="NsUWXo8M7UA"></div> | |
</div> |
/** | |
* Get videos on load | |
*/ | |
(function () { | |
getVideos(); | |
})(); | |
/** | |
* For each video player, create custom thumbnail or | |
* use Youtube max resolution default thumbnail and create | |
* iframe video. | |
*/ | |
function getVideos() { | |
let ytPlayer = document.querySelectorAll(".youtube-player"); | |
for (let i = 0; i < ytPlayer.length; i++) { | |
let el = document.createElement("div"); | |
let id = ytPlayer[i].getAttribute("data-id"); | |
let placeholder = ytPlayer[i].getAttribute("data-thumbnail") || ""; | |
if (placeholder) { | |
el.innerHTML = createCustomThumbnail(placeholder); | |
} else { | |
el.innerHTML = getYTThumbail(id); | |
} | |
ytPlayer[i].appendChild(el); | |
el.addEventListener("click", function () { | |
createIframe(ytPlayer[i], id); | |
}); | |
} | |
} | |
/** | |
* Create custom thumbnail from data-attribute provided url | |
* @param {string} url | |
* @return {string} The HTML containing the <img> tag | |
*/ | |
function createCustomThumbnail(url) { | |
return `<img class="youtube-thumbnail" src="${url}" alt="Youtube Preview" /><div class="youtube-play-btn"></div>`; | |
} | |
/** | |
* Get Youtube default max resolution thumbnail | |
* @param {string} id The Youtube video id | |
* @return {string} The HTML containing the <img> tag | |
*/ | |
function getYTThumbail(id) { | |
return `<img class="youtube-thumbnail" src="//i.ytimg.com/vi_webp/${id}/maxresdefault.webp" alt="Youtube Preview"><div class="youtube-play-btn"></div>`; | |
} | |
/** | |
* Create and load iframe in Youtube container | |
**/ | |
function createIframe(ytPlayer, id) { | |
let iframe = document.createElement("iframe"); | |
iframe.setAttribute( | |
"src", | |
`//www.youtube.com/embed/${id}?autoplay=1&color=white&autohide=2&modestbranding=1&border=0&wmode=opaque&enablejsapi=1&showinfo=0&rel=0` | |
); | |
iframe.setAttribute("frameborder", "0"); | |
iframe.setAttribute("class", "youtube-iframe"); | |
ytPlayer.firstElementChild.remove(); | |
ytPlayer.appendChild(iframe); | |
} | |
/** The following is for use with Bootstrap modal **/ | |
/** Pause video on modal close **/ | |
$("#video-modal").on("hidden.bs.modal", function (e) { | |
$(this).find("iframe").remove(); | |
}); | |
/** Pause video on modal close **/ | |
$("#video-modal").on("show.bs.modal", function (e) { | |
getVideos(); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
.youtube-container { | |
display: block; | |
width: 100%; | |
max-width: 600px; | |
margin: 30px auto; | |
} | |
.youtube-player { | |
display: block; | |
margin 20px auto; | |
padding-bottom: 56.25%; | |
overflow: hidden; | |
position: relative; | |
width: 100%; | |
height: 100%; | |
cursor: hand; | |
cursor: pointer; | |
display: block; | |
} | |
img.youtube-thumbnail { | |
bottom: 0; | |
display: block; | |
left: 0; | |
margin: auto; | |
max-width: 100%; | |
width: 100%; | |
position: absolute; | |
right: 0; | |
top: 0; | |
height: auto; | |
} | |
div.youtube-play-btn { | |
height: 72px; | |
width: 72px; | |
left: 50%; | |
top: 50%; | |
margin-left: -36px; | |
margin-top: -36px; | |
position: absolute; | |
background: url("https://freepngimg.com/thumb/categories/1398.png") no-repeat center center; | |
background-size: 72px 72px; | |
} | |
.youtube-iframe { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
} |
Use your own custom thumbnail or the thumbnail from YouTube when embedding a YouTube video on a page.
A Pen by Dennis Lahay on CodePen.