Best way to embed YouTube videos via CMS?

Design help General
1

I’m working on a site with a large collection of Videos hosted on YouTube. Each collection item has a Video field where we put the YouTube URL, then I show that collection list in a few different ways on the /watch page.

I had discussed with the client that using a lightbox style element might be better, but they were reluctant because they don’t want to have to add a key image for each video. They appreciate that those automatically get pulled in from YouTube in this current setup.

I also think they don’t expect anyone to watch the video inline on the page (seems pretty odd)—is there a way to just have it link to YouTube but still bring in the image?

As is, it feels to me like the actual videos are loading super slow. Is the delay because of my method or something with YouTube? Any other suggestions to improve the performance of this?

Here is my site Read-Only link:
https://preview.webflow.com/preview/southeastchristianchurch?utm_medium=preview_link&utm_source=designer&utm_content=southeastchristianchurch&preview=be691f14fadb9892182640d3ebb2bd3d&pageId=64e510ab7b471ab3b70a04e4&workflow=preview

Here is my staging url:
https://southeastchristianchurch.webflow.io/watch

2

Hey Walker there are a number of ways to do this.
Anytime you have a lot of youtube embeds like that you’re going to face performance and likely SEO issues as a result of the heavy page.

The only real way around that is to design the page so that you’re not loading all of the IFRAMES on page load. Instead you’re doing thumbnail previews, and the loading the video only when it’s clicked.

To build these types of galleries I usually extract the videoid into a separate plaintext field.

e.g. for this video-
https://www.youtube.com/watch?v=Ce8mu6oLxno&t=1572s&ab_channel=SoutheastChristianChurch
The ID is Ce8mu6oLxno

From that you can access the thumbnails directly in a range of sizes;

  1. Default Thumbnail (120x90): https://img.youtube.com/vi/Ce8mu6oLxno/default.jpg
  2. Medium Quality Thumbnail (320x180): https://img.youtube.com/vi/Ce8mu6oLxno/mqdefault.jpg
  3. High Quality Thumbnail (480x360): https://img.youtube.com/vi/Ce8mu6oLxno/hqdefault.jpg
  4. Standard Definition Thumbnail (640x480): https://img.youtube.com/vi/Ce8mu6oLxno/sddefault.jpg
  5. Maximum Resolution Thumbnail (1920x1080 or 1280x720): https://img.youtube.com/vi/Ce8mu6oLxno/maxresdefault.jpg

This retrieves only the thumbnail so typically I’ll layer an SVG play button over top.

On click you can then open a lightbox, but it needs to be an interactions based modal or 3rd party solution like fancybox, because you need to embed your own HTML Embed with the IFRAME embed code needed.

Another approach I like there is to use YouTube’s player library directly, and you can simply instantiate a player any time you want to play something. This is the approach I’d use if you want the videos to appear inline- but I agree that’s not an ideal UX especially for mobile users.

All of this requires custom code but not terribly complex work.

Maybe worth mentioning, it’s actually possible to build the whole page directly from YouTube playlists, which makes admin super easy- but in your case I’d likely still use the CMS. It makes your title variants, audio links, and filtering much easier to implement, and visually it will load a bit faster as the text content won’t need to be fetched remotely.

That said, I’d probably look at using playlists anyway because of youtube’s related videos feature. On pause or completion, you probably only want to show other videos from the same church.

3

Helpful tips, thank you!

1 Like