{"id":261,"date":"2021-02-28T09:26:13","date_gmt":"2021-02-28T09:26:13","guid":{"rendered":"https:\/\/asdfghjkl.me.uk\/blog\/?p=261"},"modified":"2022-08-19T18:27:35","modified_gmt":"2022-08-19T17:27:35","slug":"click-play","status":"publish","type":"post","link":"https:\/\/asdfghjkl.me.uk\/blog\/click-play\/","title":{"rendered":"Creating click-to-play YouTube videos in JS and CSS that don’t load anything until they’re needed"},"content":{"rendered":"\n

Let's be honest: streaming video is kinda hard. If you want to embed a video on your website, you're going to need it in multiple formats to support all the major browsers, and you'll probably want each of those in multiple resolutions too so your visitors with slower connections or less powerful devices aren't left out in the cold.<\/p>\n\n\n\n

You can always roll your own native HTML5 player with a bit of messing about in ffmpeg and a DASH manifest, or go ready-made and embed JWPlayer or Video.js. Of course, since video can be pretty heavy, you might want to host the files from a CDN too.<\/p>\n\n\n\n

But I just want a simple little website for my personal portfolio, and since I don't expect many visitors, it's just not worth the effort. I'm not the biggest Google fan but it's undeniable that YouTube have built a very competent platform, and it's very tempting to just throw a couple iframes up and call it a day. But my website is lightweight and fast (and I feel smug about it): it doesn't need<\/em> to pull in any external resources, and I don't want Google tracking all of my visitors before they've even watched a video. With a few simple changes, we can make our embeds only load when they're clicked, and give them nice thumbnails and buttons to boot.<\/p>\n\n\n\n

We start by creating our placeholder player:<\/p>\n\n\n

<div<\/span> class<\/span>=\"youtube overlay\"<\/span> data-id<\/span>=\"xi7U1afxMQY\"<\/span>><\/span>\n<\/span><\/span>\t<a<\/span> class<\/span>=\"play\"<\/span> href<\/span>=\"https:\/\/youtube.com\/watch?v=xi7U1afxMQY\"<\/span> aria-label<\/span>=\"Play video\"<\/span>><\/span>\n<\/span><\/span>\t\t<div<\/span> class<\/span>=\"thumbnail-container\"<\/span>><\/span>\n<\/span><\/span>\t\t\t<picture<\/span>><\/span>\n<\/span><\/span>\t\t\t\t<source<\/span> srcset<\/span>=\"thumbnails\/mountains.avif 960w, thumbnails\/mountains-2x.avif 1920w\"<\/span> type<\/span>=\"image\/avif\"<\/span>><\/span>\n<\/span><\/span>\t\t\t\t<img<\/span> class<\/span>=\"thumbnail\"<\/span> srcset<\/span>=\"thumbnails\/mountains.jpg 960w, thumbnails\/mountains-2x.jpg 1920w\"<\/span> src<\/span>=\"thumbnails\/mountains.jpg\"<\/span> alt<\/span>=\"Life in the Mountains\"<\/span> loading<\/span>=\"lazy\"<\/span>><\/span>\n<\/span><\/span>\t\t\t<\/picture<\/span>><\/span>\n<\/span><\/span>\t\t\t<span<\/span> class<\/span>=\"duration\"<\/span>><\/span>8:48<\/span<\/span>><\/span>\n<\/span><\/span>\t\t\t<div<\/span> class<\/span>=\"play-overlay\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/span><\/span>\t\t<\/div<\/span>><\/span>\n<\/span><\/span>\t<\/a<\/span>><\/span>\n<\/span><\/span><\/div<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The ID of the video is stored in the data-id<\/code> attribute, which we'll use later to insert the iframe. Since we'll need Javascript for this, the play<\/code> link contains the full URL so non-JS users can click through to watch it directly on YouTube. We include a thumbnail, in JPG for compatibility and AVIF for better compression on modern browsers (avif.io<\/a> is a great little online tool to convert all of your images, since as I write this it's rarely supported by image editors), and in two resolutions (960px and 1920px) as smaller screens don't need the full-size image. We also include the duration \u2013 why not? \u2013 and play-overlay<\/code> will hold a play button icon.<\/p>\n\n\n\n
We can now apply some CSS:<\/p>\n\n\n
.overlay<\/span> {\n<\/span><\/span>\tposition<\/span>: relative;\n<\/span><\/span>\twidth<\/span>: 100vw<\/span>;\n<\/span><\/span>\theight<\/span>: calc<\/span>((100vw<\/span>\/16<\/span>)*9<\/span>);\n<\/span><\/span>\tmax-width<\/span>: 1920px<\/span>;\n<\/span><\/span>\tmax-height<\/span>: 1080px<\/span>;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.overlay<\/span> .thumbnail-container<\/span> {\n<\/span><\/span>\tposition<\/span>: relative;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.overlay<\/span> .thumbnail<\/span> {\n<\/span><\/span>\tdisplay<\/span>: block;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.overlay<\/span> .duration<\/span> {\n<\/span><\/span>\tposition<\/span>: absolute;\n<\/span><\/span>\tz-index<\/span>: 2<\/span>;\n<\/span><\/span>\tright<\/span>: 0.5rem<\/span>;\n<\/span><\/span>\tbottom<\/span>: 0.5rem<\/span>;\n<\/span><\/span>\tpadding<\/span>: 0.2rem<\/span> 0.4rem<\/span>;\n<\/span><\/span>\tbackground-color<\/span>: rgba<\/span>(0<\/span>, 0<\/span>, 0<\/span>, 0.6<\/span>);\n<\/span><\/span>\tcolor<\/span>: white;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.overlay<\/span> .play-overlay<\/span> {\n<\/span><\/span>\tposition<\/span>: absolute;\n<\/span><\/span>\tz-index<\/span>: 1<\/span>;\n<\/span><\/span>\ttop<\/span>: 0<\/span>;\n<\/span><\/span>\twidth<\/span>: 100%<\/span>;\n<\/span><\/span>\theight<\/span>: 100%<\/span>;\n<\/span><\/span>\tbackground<\/span>: rgba<\/span>(0<\/span>, 0<\/span>, 0<\/span>, 0.1<\/span>) url<\/span>(\"images\/arrow.svg\"<\/span>) no-repeat scroll center center \/ 3rem<\/span> 3rem<\/span>;\n<\/span><\/span>\ttransition<\/span>: background-color 0.7s<\/span>;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.overlay<\/span> .play-overlay<\/span>:hover<\/span> {\n<\/span><\/span>\tbackground-color<\/span>: rgba<\/span>(0<\/span>, 0<\/span>, 0<\/span>, 0<\/span>);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.overlay<\/span> iframe<\/span> {\n<\/span><\/span>\tposition<\/span>: absolute;\n<\/span><\/span>\tz-index<\/span>: 3<\/span>;\n<\/span><\/span>\twidth<\/span>: 100%<\/span>;\n<\/span><\/span>\theight<\/span>: 100%<\/span>;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
On my site I've already set the width and height for the video's container, so I've just shown an example for overlay<\/code> here, using vw<\/code> units so it fills the viewport's width whether portrait or landscape. My thumbnails only go up to 1920x1080 so I've limited it to that in this example. Sorry 4K users! You can use a calc<\/code> expression for the height to get the correct aspect ratio (here 16:9).<\/p>\n\n\n\n
On to positioning. Setting position: relative<\/code> for the container means we can use absolute positioning for the iframe to fit to the thumbnail's size, and position: relative<\/code> on the thumbnail's container and display: block<\/code> on the thumbnail itself fits everything else to the thumbnail too. Duration sits in the bottom right with a little space to breathe. We set z-indexes so elements will stack in the correct order: thumbnail on the bottom, overlay above it, duration on top of that, and the iframe will cover everything once it's added.<\/p>\n\n\n\n
What remains is just little extras: the overlay slightly darkens the thumbnail until it's hovered over, and we take advantage of the background<\/code> property allowing both colour and URL to drop a play button on top. The button is an SVG so simple you can paste the code into arrow.svg yourself:<\/p>\n\n\n
<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> viewBox<\/span>=\"0 0 100 100\"<\/span>><\/span><polygon<\/span> points<\/span>=\"0 0 100 50 0 100 0 0\"<\/span> style<\/span>=\"fill:#fff\"<\/span>\/><\/span><\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Now all we need is a little JS to handle inserting the iframe when the placeholder is clicked \u2013 no JQuery required! Insert it just before the closing <\/body><\/code> tag so it runs once all the placeholders it'll be working on have loaded.<\/p>\n\n\n
document<\/span>.querySelectorAll(\".youtube\"<\/span>).forEach(function<\/span>(element<\/span>) <\/span>{\n<\/span><\/span>\telement.querySelector(\".play\"<\/span>).addEventListener(\"click\"<\/span>, (event) => {\n<\/span><\/span>\t\tevent.preventDefault();\n<\/span><\/span>\t\tloadVideo(element);\n<\/span><\/span>\t});\n<\/span><\/span>});\n<\/span><\/span>var<\/span> loadVideo = function<\/span>(element<\/span>) <\/span>{\n<\/span><\/span>\tvar<\/span> iframe = document<\/span>.createElement(\"iframe\"<\/span>);\n<\/span><\/span>\tiframe.setAttribute(\"src\"<\/span>, \"https:\/\/www.youtube.com\/embed\/\"<\/span> + element.getAttribute(\"data-id\"<\/span>) + \"?autoplay=1\"<\/span>);\n<\/span><\/span>\tiframe.setAttribute(\"frameborder\"<\/span>, \"0\"<\/span>);\n<\/span><\/span>\tiframe.setAttribute(\"allowfullscreen\"<\/span>, \"1\"<\/span>);\n<\/span><\/span>\tiframe.setAttribute(\"allow\"<\/span>, \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"<\/span>);\n<\/span><\/span>\telement.insertBefore(iframe, element.querySelector(\".play\"<\/span>));\n<\/span><\/span>};\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The first function finds every placeholder on the page, adding a listener for each play button being clicked. Note that we use the overlay<\/code> class for the CSS but youtube<\/code> for the JS \u2013 this is so we can extend our code later to cover more platforms if we like, which would need different JS. When a visitor clicks play, it cancels the default action (navigating to the URL, which we included for non-JS users) and calls the loadVideo<\/code> function, passing on the specific video they clicked.<\/p>\n\n\n\n
The loadVideo<\/code> function puts together the iframe for the video embed, getting the ID from the container's data-id<\/code> attribute. We use www.youtube-nocookie.com (the www is necessary!) as it pinkie promises not to set cookies until you play the video (2022 edit - this URL seems to be commonly blocked by adblockers, so I've reverted it to the standard one)<\/em>, and set a few attributes to let mobile users rotate the screen, copy the link to their clipboard etc. Although we set it to autoplay since we've already clicked on the placeholder, it doesn't seem to work as I write this. I'm not sure why and they encourage you to embed their JS API instead, but that would sort of defeat the point. Finally, it inserts the iframe as the first element in the container, where it covers up the rest.<\/p>\n\n\n\n
If all goes well, you should now have something that looks like this (albeit functional):<\/p>\n\n\n\n
\"Completed<\/figure>\n\n\n\n
You can also see it in action on my website<\/a>. Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"
Let's be honest: streaming video is kinda hard. If you want to embed a video on your website, you're going to need it in multiple formats to support all the major browsers, and you'll probably want each of those in multiple resolutions too so your visitors with slower connections or less powerful devices aren't left […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/posts\/261"}],"collection":[{"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":15,"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/posts\/261\/revisions\/342"}],"wp:attachment":[{"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asdfghjkl.me.uk\/blog\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}