Streaming live at 10am (PST)

High performance, native-styled YouTube Embed

The default YouTube embed in Webflow is really slow and heavy for mobile page loading performance, especially for light websites targeting low-bandwidth / low-CPU audiences. The YouTube embed alone adds 10+ requests, hundreds of KBs, and for light websites, it’s even noticeable on a wired 100Mbps ISP / i5-8600K system / 32 GB system.

Here’s a much more performant version that looks just like a native YouTube embed. All credit goes to groupboard for their ytdefer repo.

Check out the demo here (non-Webflow): https://www.groupboard.com/ytdefer.html

This embed’s improvements over Webflow’s native YouTube embed:

  • loads extremely quickly (a 4 KB script)
  • looks and feels like the native YouTube player (embedded SVGs!)
  • only one click to begin the video, unlike almost every (all?) YouTube defer scripts
  • allows custom thumbnails (say like an SVG you’ve added to the Webflow Asset Manager)

Before (using Webflow’s default YouTube embed):

After (using groupboard’s ytdefer):

And folks, that’s just one video embed. Unfortunately, this is for a private project so I can’t share the Webflow URLs, but you’ll be done in 5 minutes, if not less.

INSTRUCTIONS

A) Add the 4 KB script!
B) Add the div!
C) Add custom thumbnail! (optional)

  1. Add the 4 KB script! In Webflow, open your page’s settings (the page where the video will go). Scroll down to before /body tag at the end. Copy the script (this is the latest minified version) & copy this Javascript call to attach at the end on a new line:
window.addEventListener('load', ytdefer_setup);

Type <script>, paste in both the minified version & the JavaScript call on a new line after it, and type </script> to close the script. It should look like this when you’re done:

<script>
var ytdefer_ic_w=73;var ytdefer_ic_h=52;var yt_icon='<svg height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#eb3223"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>';var yt_dark_icon='<svg height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>';function ytdefer_setup()
{var d=document;var els=d.getElementsByClassName('ytdefer');for(var i=0;i<els.length;i++)
{var e=els[i];var ds=e.getAttribute('data-src');if(!ds)
{alert("data-src missing for video");return;}
var w=e.clientWidth;var h=e.clientHeight;var dv=d.createElement('div');dv.id='ytdefer_vid'+i;dv.style.width=w+'px';dv.style.height=h+'px';dv.style.position='relative';dv.onresize=ytdefer_resize;e.appendChild(dv);var im=d.createElement('img');var res='0';if(w>480)
{res='maxresdefault';}
im.src='https://img.youtube.com/vi/'+ds+'/'+res+'.jpg';im.id='ytdefer_img'+i;im.style.width='100%';im.style.height='100%';im.style.objectFit='cover';im.style.position='absolute';im.onclick=gen_ytdefer_clk(i);dv.appendChild(im);var bt=d.createElement('button');bt.style.backgroundImage="url(data:image/svg+xml;base64,"+window.btoa(yt_dark_icon)+")";bt.id='ytdefer_icon'+i;bt.style.position='absolute';bt.style.border='0';bt.style.backgroundColor='transparent';bt.style.left=(w/2-ytdefer_ic_w/2)+'px';bt.style.top=(h/2-ytdefer_ic_h/2)+'px';bt.style.width=ytdefer_ic_w+'px';bt.style.height=ytdefer_ic_h+'px';bt.style.pointerEvents='none';dv.appendChild(bt);im.onmouseover=gen_mouseover(bt);im.onmouseout=gen_mouseout(bt);}
if(typeof(YT)=='undefined')
{var js=d.createElement("script");js.type="text/javascript";js.src="https://www.youtube.com/player_api";d.body.appendChild(js);}
window.addEventListener('resize',ytdefer_resize);}
function ytdefer_resize()
{var d=document;var els=d.getElementsByClassName('ytdefer');for(var i=0;i<els.length;i++)
{var e=els[i];var w=e.clientWidth;var h=e.clientHeight;var dv=d.getElementById('ytdefer_vid'+i);dv.style.width=w+'px';dv.style.height=h+'px';var ic=d.getElementById('ytdefer_icon'+i);if(null!=ic)
{ic.style.left=(w/2-ytdefer_ic_w/2)+'px';ic.style.top=(h/2-ytdefer_ic_h/2)+'px';}}}
function gen_mouseout(bt)
{return function()
{bt.style.backgroundImage="url(data:image/svg+xml;base64,"+window.btoa(yt_dark_icon)+")";}}
function gen_mouseover(bt)
{return function()
{bt.style.backgroundImage="url(data:image/svg+xml;base64,"+window.btoa(yt_icon)+")";}}
function gen_ytdefer_clk(i)
{return function()
{var d=document;var el=d.getElementById('ytdefer_vid'+i);var vid_id=el.parentNode.getAttribute('data-src');var player=new YT.Player(el.id,{height:el.style.height,width:el.style.width,videoId:vid_id,events:{'onReady':function(ev){ev.target.playVideo()}}});}}

    window.addEventListener('load', ytdefer_setup);
    </script>
  1. Make the video div! Create a new div: this is where your video will appear. First, give it the class ytdefer
    image

Then head over to Element Settings. Add a custom attribute data-src + the YouTube video ID:

image
The YouTube video ID is the string of letters/numbers at the end after watch?v=

https://www.youtube.com/watch?v=dQw4w9WgXcQ

For this video, use this: dQw4w9WgXcQ

image

You’re done! Congrats. Enjoy the much faster page loading performance, especially on mobile!

BONUS SPEED TIP (ADVANCED):

You’ll notice the script calls the default YouTube thumbnail, which is great for most videos and reduces manual labor. YouTube has excellent CDNs, strong compression, and any time you switch the thumbnail on the video in YouTube.com’s settings, it’ll automatically switch on your published Webflow site.

But, let’s say your logo is text-heavy and you just happen to upload a 2 KB SVG to your Webflow Asset Manager and the client won’t be changing the thumbnail later (remember to embed fonts! I love vecta.io/nano for this!). If you could use that SVG, you’d 1) have one less external URL request, 2) have higher quality image at any breakpoint, and 3) also use less bandwidth than the JPG.

The solution: just replace this image URL found in the JavaScript we copied earlier with your own Webflow asset’s URL and, wam, bam, you’ve got a very fast, native-looking YouTube embed.

im.src='https://img.youtube.com/vi/'+ds+'/'+res+'.jpg'
im.src='https://uploads-ssl.webflow.com/etc/etc/etc/YouTube-thumbnail.svg'

(keep the quotes. it should be .svg' at the end, not .svg – use the extension of your image).

BONUS CUSTOMIZATION TIP (ADVANCED):

One thing you’ll realize: you’ll only get the default YouTube styling, with the bright red seek bar and the related videos at the end could be from any which channel. To get a white seek bar & related videos only from the same channel, you’ll need to use YouTube Parameters. Add this line to the code almost near the end of the script at this location (if it’s minified, just look carefully and you can remove the spaces):

playerVars:{'color':'white','rel':0},


Note the syntax: words use single-quotes like 'color' and 'white' while numbers are plain like 0.

This approach is needed because we cannot use the &rel=0 or &color=white URL parameters because this script uses YouTube’s Player API instead of the typical (and slow) iframe approach. The parameters are the same, but the syntax is different and they go inside the script itself, not behind the URL.

If you want more parameters or want to do wilder things:

See a list of all current YouTube parameters
See the YouTube Player API reference (CTRL/CMD+F for playerVars)

1 Like

Hello @TG2,

Thanks for sharing. I’ll give it a try on a future project.

1 Like

Hello, @Pablo_Cortes!

Cheers. I’d be excited to see your results!

Updated the guide (23/10/19) to teach how to use the customize YouTube parameters, so you can get rid of the bright red seek bar and kill all the “suggested videos” from every corner of YouTube -> only suggest videos from the same channel.

It’s crazy easy and depending on your website’s theme, a white seek bar looks much better than the default red one.

Since the script uses the native YouTube Player API, we’ll add the parameters via playerVars. Then you can add any parameter you’d like (though YouTube is wont to remove/kill parameters every few months; the latest list is linked above).