Youtube Embed - Autoplay, Loop, Responsive with No Controls!

Community resources Webflow Tips
1

Hi All,

Recently I have had trouble having a responsive YouTube video which autoplays, loops and has no YouTube controls. I just thought I’d it with you just in case anyone else is struggling with the same issue.

Here is the code:

<iframe style="position: absolute; top: 0; left: 0;" src="https://www.youtube.com/embed/8HSr8BjcufM?autoplay=1&controls=0&loop=1&playlist=8HSr8BjcufM&amp;showinfo=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

I then followed the tutorial here to make things responsive!

Something to be aware of…
You have to make a playlist within YouTube containing the video (this makes the looping possible)

Hope this helps!
M

10 Likes
2

Ah! that is great. Will remember the playlist trick for looping!

1 Like
3

Thank you for sharing

4

It’s working anymore. Why? Do you have any idea? Thank you!

5

Google services in general will not accept autoplaying videos via scripting in newer versions of chrome. That could be a reason since mine stopped working.

6

Hi all.

I’ve came across this post and It’s just WOW! Great solution, thank you. Would like to share my experience too. I use YouTube gallery by Elfsight. This widget is customizable and adjusted for all screen resolutions.

You can try out it here: https://elfsight.com/youtube-channel-plugin-yottie/webflow/#demo

I’m new here, and would like to know something else about creating a website. If you have something to offer, please, write to me!

1 Like
7

to use autoplay you need to put MUTE sound and works. try with this

1 Like
8

Is possible do autoplay at channel live stream and embed?

9

Thank you for this! I just spent forever trying to also have the video muted while it autoplay loops. I also couldn’t get the loop to work on chrome, it would start and then stop. I ended up copying the webflow youtube element iframe with autoplay and mute selected in the webflow options and then I added in the loop playlist parts you displayed above along with the responsive tutorial you linked to.

For anyone trying to do what I was doing.

 <iframe src="https://www.youtube.com/embed/3JWTaaS7LdU?&loop=1&playlist=3JWTaaS7LdU;rel=0&amp;controls=1&amp;autoplay=1&amp;mute=1&amp;start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

Replace the parts that say video id with your embed video id.

<iframe src="https://www.youtube.com/embed/ VIDEO_ID?&loop=1&playlist= VIDEO_ID;rel=0&amp;controls=1&amp;autoplay=1&amp;mute=1&amp;start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
1 Like
10

hi i have some probleme i need help pleas

11

I’m trying to loop a 2.13MB video on Behance. I’ve followed the steps above however at the end/start of each loop there’s a janky hard reset. I’ve screen captured it and shown an example of what I prefer by comparison, though I’m unsure if their video doesn’t look janky simply because they have a blank screen to start with.

I’ve also included the embed code at the start of the video so you can pause and have a look at it in context. But I’ll also paste it here.

<iframe width=“1123” height=“748” src=“YouTube” frameborder=“0” allowfullscreen>

Edit:I don’t know how to … properly paste the code, as I said though it’s shown at the start of the video.

12

This topic got many views, Who are watching this topic, I want to share some info.

If you are embedding the video by HTML code then you can use the below script method to load a video. The benefit of it is: you will not face speed issues for the video embedding.

<div id="video-container"></div>

<script>
  // Delay in milliseconds before loading the video
  var delayInMilliseconds = 5000; // 5 seconds

  setTimeout(function() {
    var videoContainer = document.getElementById('video-container');
    videoContainer.innerHTML = '<iframe style="position: absolute; top: 0; left: 0;" src="https://www.youtube.com/embed/8HSr8BjcufM?autoplay=1&controls=0&loop=1&playlist=8HSr8BjcufM&amp;showinfo=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  }, delayInMilliseconds);
</script>

Note: customize the delay time and the video source for your video.