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

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 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 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>

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).

1 Like