Optimizing youtube embeds in Webflow for SEO (i.e. Add lite youtube embed (JS-deliver) to site)

Publishing help SEO
1

Has anyone had any experience optimizing youtube embeds for their webflow site?

Our SEO team mentioned installing an npm package referencing GitHub - paulirish/lite-youtube-embed: A faster youtube embed.

Based on research this installing npms doesnt look possible in webflow.

Any suggestions on any workarounds or other solutions on optimizing youtube embeds in webflow with a focus on SEO performance?

2

I have used GSAP scrolltrigger to only play videos when they are in view which keeps them from loading when they are not. This works well if you have multiple videos on the same page. You could also take a queue from Vimeo and YouTube and handle video launching via a lightbox. Keeps the page nice and lean and lets the user open a video to view using a trigger.

1 Like
3

Thanks for the suggestions Jeff.

The video is in the initial viewport so i really think our main recommendation would be actually moving it from above the fold, a scroll trigger could then work well in that instance.

I do like the idea of the lightbox too just in terms of the user experience, particularly on mobile.

4

I’m implementing this on my site using the paulirish/lite-youtube-embed git.

Step 1. Place the following code in the page’s head tag

<link rel="stylesheet" href="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.css" />

Step 1
Step 11312×334 33.6 KB

Step 2. Place the following code before the page’s body end tag

<script src="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.js"></script>

Step 2
Step 21292×176 15.5 KB

Step 3. Insert the following code in the page within an <> HTML Embed within the page:

<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

Step 3
Step 31594×380 38.9 KB

There is a video explaining this here:

And they have a page where you can look at the source code here:
https://alternate-way-to-use-youtube-video-in-w.webflow.io/

Or you can look at the videos on my site which I’m intending to adjust to follow this methodology in the next couple of days:

There’s one issue I’ve found with the implementation. The width of the video is capped to 720 px. That’s discussed here:

I’ve solved for this by downloading the repository and hosting it locally and then adjusting the max pixel width to 800 px on my version. (That’s why the URLs in my pictures are different from the code inserts).