Embed a Youtube video inside a slideshow - and maybe make it loop

Design help Custom code
1

Hi,

I have no coding skills and I want to make a Youtube video loop in a Webflow slide. I probably need to add a tiny amount of code somewhere. I spent 90 minutes online and on the forum, but all recommendations have code and they are more focused on embedding a video of a specific size.

The simplest suggestion was to add this code structure in the project link box:

However, after adding my video ID (m935NBs8kMY), it still doesn’t work for me… I also tried with the original shortened default link from Youtube - it doesn’t work.

Here’s the project preview - video is on the second slide on Homepage: https://primavera-upform.webflow.io/

Here’s the project link: https://preview.webflow.com/preview/primavera-upform?utm_source=primavera-upform&preview=4ded26b67d1145981f0e9c51579c5662

This is the video I’ve tried to embed: PrimaveraDevelopment - YouTube

Thanks for any help!

M

2

Instead of adding the video block can you try replacing it with an embed code element and add this code within it and tell me if that works for you?

<style>
  .embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
  } 
  .embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  }
</style>
<div class='embed-container'>
  <iframe src='https://www.youtube.com/embed//m935NBs8kMY?version=3&loop=1&playlist=VIDEO_ID' frameborder='0' allowfullscreen></iframe>
</div>
3

Hi Noah,

Thanks! it seems to almost work.

https://primavera-upform.webflow.io/home-2 (the second slide)

The video is not playing, so I guess I still need to add some code to autoplay the video…

I added your code with copy/paste, and a screenshot. I will study this, if I’d have a solution it will be so useful - years from now.

M

1919×1067 262 KB

4

&autoplay=1 try adding that at the end of the video id in the video link inside the iframe.

5

Thanks Noah,

Doesn’t work. I will probably try randomly all kinds of advices found on the internet.

I’m astonished though that these extremely basic issues are not treated as big problems to be solved. I’m a designer, Webflow’s mission is to help designers. Would love to have an index of solved problems like this one - and I wouldn’t mind creating a list with these, I wasted lots of hours trying to solve simple tasks. I’m not even thinking of trying fancy stuff like the grid or eCommerce until these very basic issues are acknowledged as disrupting significantly the efficiency of a designer. I might get it wrong though - when Webflow says it’s for designers with no coding knowledge, maybe it means web designers/programmers, not graphic designers. Because it takes for granted that you have coding skills to solve many issues.

Sorry for expressing this. I think Webflow has great potential but maybe I’m not part of its main target group.

Thanks for offering the sample code. I’ll try different combinations from online articles until I will hopefully get lucky.

M

6

Hey, @unksup. I am actually working on a site concept for just that! Basically filtering everything out and showcasing solved problems and fixes for issues or requests in Webflow.

To further get to your original issue. On September 25th YouTube changed and removed a lot of it’s video options. I don’t think autoplay is an option anymore. They also removed the option to remove the player controls and title and furthermore you can no longer remove the related videos suggestions at the end of videos as YouTube believe that’s one of their core features that makes YouTube what it is. The autoplay thing could be relating to browser policies.

Thanks for expressing your thoughts man. That’s how we all progress!

7

Hi Noah,

Thanks for that. I had to spend some time on this issue and I’ve came across the news too. So in the end I’ve noticed Vincent recommended EasyHTML5Video and I’ve tried it, but it only works for desktop. They Q&A on their website make it clear that for tablets&mobiles the video doesn’t have autoplay.

So I guess it really is complicated. There’s one more thing to try - a premium Vimeo account (will try this option in a few weeks as well and will come back with news).

In the end, it all comes down to the native background video element in Webflow, which is flawless, and the main question is: why is it limited to 30 mb? I managed to convince my client to split their video in three - but I don’t think this is going to work every time.

Gathering all these common issues into a single place would make it so much faster for designers like me to decide their approach considering time restraints. I probably spent two working days on this issue, and the quick answer is ”anything else than Webflow background video will take 100x more time and with buggy and less clean results”. So, for me, the resource that you’re trying to put together will be an outstanding resource.

Thanks!
M