Can I use the Youtube component with CMS?

Design help CMS
1

I’d like the videos to autoplay and it seems like it works only with the Youtube component, but the Youtube component doesn’t work with CMS, or did I miss something? Do I really have to choose?
Thanks, Lupo

https://preview.webflow.com/preview/asaf-lupo-portfolio?utm_source=asaf-lupo-portfolio&preview=988e3a4d9fb47c61e705819dd25d03be

Here is my public share link: LINK
(how to access public share link)

2

Yes the yt component doesn’t exist as a fiedl for CMS yet. However you can grab any pre set embed code from YT or any other video service, and use it with CMS inside of a Custom Code box. You’ll then select the part of the code that has an ID (for youtube, that’d be the ID inside of the URL), and make that dynamic by linking it to a text field in your collection. Site’s user will just enter the ID of video pages in the CMS.

1 Like
3

Hey @LupoAsaf

@vincent is right. The new youtube component doesn’t work with CMS binding. So either use the video component or dynamic embed.

A bonus with the dynamic embed is using Zapier to send youtube ids (and more) to a collection then combine that with the youtube lazy load method. Golden.

1 Like
4

and there’s no way to have auto-play with the regular video component, right?

5

No. It doesn’t have any customization settings.

1 Like
6

Right

1 Like
7

@LupoAsaf a few days after my last message, Webflow updated the way you can embed a Youtube video. There’s now a lot of options, including autoplay, in the Youtube component.

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-02-12_10-56-01.png

Enjoy :slight_smile:

8

Thanks, @vincent. But the problem was and is, the youtube component does not work with CMS, and the video component doesn’t support auto-play. Since I want to use CMS, I have to go without the auto-play. That hasn’t changed, has it?

9

No, you’re right, it hasnt changed for CMS. Have you solved it with custom code yet?

10

I haven’t. I’m a designer, not a developer. I need a “for dummies” solution. The lazy loading solution suggested above seems irrelevant as I have only one video per page. https://preview.webflow.com/preview/asaf-lupo?utm_source=asaf-lupo&preview=988e3a4d9fb47c61e705819dd25d03be

11

4 yrs late, but as of now WF does support linking CMS url field to a Video element :slight_smile:

1 Like
12

For what it’s worth, I got this to work with the simple script below. A couple things to note:

  1. Put a YouTube link into the YouTube element setting on the collection page, understanding that it is just a placeholder.
  2. Make sure to you use the embed version of the YouTube link (can be found in the ‘share’ settings on YouTube)
  3. This is designed to retain whatever YouTube settings are configured on the YouTube element via query paramters.
<script>

document.addEventListener("DOMContentLoaded", function() {
    var embed = "CMS YOUTUBE LINK";
    var oldSrc = document.querySelector(".w-embed-youtubevideo iframe").src;
    var index = oldSrc.indexOf('?');
    var queryParams = oldSrc.substring(index, oldSrc.length);
    var newSrc = embed + queryParams;
    document.querySelector(".w-embed-youtubevideo iframe").src = newSrc;
});


</script>