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

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

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

1 Like

Thank you for sharing

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

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.

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

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

1 Like

Is possible do autoplay at channel live stream and embed?

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

hi i have some probleme i need help pleas

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.

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.