Autoplaying YouTube videos is an easy way to add some spark to your website. If you hide the controls and enable a loop, you can use it to showcase products and services. And why not disable related videos from competitors, remove the YouTube logo and disable YouTube cookies? Here’s everything you need to know about YouTube autoplay in WordPress!

Is it really possible to autoplay YouTube videos in WordPress?

Yes, as I will show you in the live demo below, it’s possible to autoplay YouTube videos in WordPress. However, since browsers like Chrome and Safari prevent video with audio from autoplaying, you’ll need to add a little string to mute the video. But don’t worry, it’s easy peasy and your visitors can easily unmute the video with one click. And no, you don’t need a plugin or any paid services to acheive this.

Live demo: Autoplaying YouTube Video

Below you can see a live demo of an embedded YouTube video that autoplays by default. The video is muted but the visitor can click the audio icon to unmute.

Step 1. Create your YouTube embed code

The first step is to create a code snippet for your autoplaying embedded video. This is not as hard as it sounds since YouTube will generate most of the code for you automatically. The procedure is the same, regardless of which pagebuilder you use.

1. Go to youtube.com and open the video that you want to embed and autoplay
   💡 I’m going to use my video WordPress for beginners | FREE DIVI COURSE at https://youtu.be/8LCnT-xrr6M as an example video in this tutorial
2. Click the Share button below the video and click Embed in the popup
3. Leave the default settings as is (we’ll take a look at the more advanced settings in a minute). Click Copy in the bottom right corner to copy the code to your clipboard.
   
4. Paste the snippet in a code editor like my favorite CotEditor (for Mac) or NotePad++ (for PC). Or use a simple text editor like Notepad. It should look something like this (but with your unique video ID instead of 8LCnT-xrr6M):

   <iframe width="560" height="315" src="https://www.youtube.com/embed/8LCnT-xrr6M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

5. It’s time to add the autoplay magic! Add the following string after the video ID (for example 8LCnT-xrr6M) and before the ending quotation mark: ?autoplay=1&mute=1
   

The end result should look something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/8LCnT-xrr6M?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Step 2. Embed the YouTube Video With AutoPlay in WordPress

Even though there are plenty of different page builders for WordPress, the principle for embedding your autoplaying YoiuTube video is the same. You need to paste the code snippet that you created in step 1 and paste it without the code being distorted by the editor. Here’s how to embed a YouTube video with autoplay in Divi, Elementor, Gutenberg and Classic Editor.

💡 Are you using another WordPress pagen builder like Beaver Builder, Brizy, WP Bakery or Visual Composer? By looking at the steps below, you will probably figure out how to embed the autoplayed video in any WordPress page builder on the market.

2.1 Autoplay YouTube Video With Divi

Emedding an autoplaying YouTube video in the worlds’ most popular WordPress theme Divi is a piece of cake. Here’s how:

1. Enable the Visual Builder and click the grey + icon to insert a new Divi modiule where you want to embed your autoplaying YouTube video
2. Browse the list of modules and click the Code module to insert it
   💡 Do not choose the Video module since it can’t autoplay YouTube videos. However, you can autoplay self-hosted videos in the Video module but that’s another tutorial.
3. Paste your YouTube embed code that you created in step 1 in the Code field in the Content tab below the Text heading
4. You should already see the video autoplaying in the Visual Builder by now. Don’t worry if they video displays in greyscale in the Divi Builder – the colors will be displayed in frontend. Save the Code module by clicking the green checkmark button.

Save or publish the page and preview it in frontend. Clear your browser cache and website cache if the autoplay doesn’t work.

💡 Troubleshooting. Some browsers might block autoplay if the device is set to battery saving mode.

2.2 Autoplay YouTube Video In Elementor

To autoplay YouTube videos in Elementor is just as easy as in Divi. But you have to use the right “element”, and it might not be the one you think. This method works both in the free version and in Elementor Pro.

1. Edit the page with Elementor and search for HTML in the Elements list on the left side
   💡 Do not use any of the elements Video, Code Highlight or Shortcode to insert the YouTube embed code since they won’t allow you to autoplay the video..
2. Paste your YouTube autoplay embed code from step 1 in the HTML Code field to the left
   💡 You can ignore the deprecated “Named entity expected got none” warning in the Elementor HTML Code field since it works fine anyway. But if you want to get rid of the warning, you can replace the ampersand symbol & with &amp in the code. If someone from the Elementor team is reading this: Update your obsolete code validation, please! 😉
3. You should see the video autoplaying in the Elementor builder interface already. Click PUBLISH or UPDATE in the bottom left corner to save the page.

Clear your browser cache and website cache if the autoplay doesn’t work in frontend.

💡 Troubleshooting. Some browsers might block autoplay if the device is set to battery saving mode.

2.3 Autoplay YouTube Video In Gutenberg Block Editor

I’m not the biggest fan of Gutenberg but when it comes to embedding autoplaying YouTube videos, it’s pretty straight forward – but make sure to use the correct block!

1. Edit the page with the Gutenberg Block Editor and click the + icon in the top left corner to insert a new block
2. Search for HTML and insert a Custom HTML block
   💡 Do not use any of the blocks Code, Shortcode, YouTube or Video since they won’t allow you to autoplay the video.
3. Paste your YouTube autoplay embed code from step 1 in the Write HTML… field.
   
4. Click the Preview button in the Custom HTML block to preview the autoplay video or just Publish the page and preview it in frontend.

Clear your browser cache and website cache if the autoplay doesn’t work.

💡 Troubleshooting. Some browsers might block autoplay if the device is set to battery saving mode.

2.4 Autoplay YouTube Video In The Classic Editor

The good old Classic Editor for WordPress can look a bit different on different WordPress installations. But you should see two tabs in the top right corner of the editor: Visual and Text.

1. Edit the page or post with the Classic Editor
2. Make sure that you are adding clean HTML code by clicking the tab Text (do not use the Visual interface) in the top right corner of the editor.
3. Paste your YouTube autoplay embed code from step 1 in the Text field field.
   💡 Make sure that you have selected Text in the top right tab
4. Click the Visual tab in the top right corner to preview the YouTube autoplay video in the editor. You can add text and other content above and below the video.
   
5. Click the Publish or Update button to the right (or below) the Classic Editor and preview the page or post in frontend.

Clear your browser cache and website cache if the autoplay doesn’t work.

💡 Troubleshooting. Some browsers might block autoplay if the device is set to battery saving mode.

Bonus: Advanced Options For Embedded YouTube Videos in WordPress

Autoplay and Mute are just two of many different parameters that you can use to customize your embedded YouTube videos. You can mix and mach the different parameters but you need to follow these simple principle to make it work:

1. Add a question mark ? after your video ID and before the first parameter, for example: VIDEO_ID?autoplay=1
2. Add an ampersand & before the rest of your parameters, for example: VIDEO_ID?autoplay=1&mute=1&loop=1
3. =1 means that the parameter is enabled (like all three parameters in the example above
4. =0 means that the parameter is disabled, for example: VIDEO_ID?loop=0

Here are my favorite customizations for embedded YouTube videos in WordPress.

1. Looping an autoplaying YouTube video

Don you want to add an infinite loop to your video that makes it repeat automatically? This is a tiny bit more complicated than the other options, so make sure to get the code right. You need to add both loop=1 and playlist=VIDEO_ID (replace VIDEO_ID with your video ID) in order for the loop to work. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/8LCnT-xrr6M?autoplay=1&mute=1&loop=1&playlist=8LCnT-xrr6M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Just replace the video ID and the playlist ID 8LCnT-xrr6M with your video ID.

2. Hiding the controls on your autoplaying YouTube video

To hide the YouTube control buttons like play, pause, and volume, just add the parameter controls=0 to your embed code. Use the code below to embed an autoplaying video without control icons.

<iframe width="560" height="315" src="https://www.youtube.com/embed/8LCnT-xrr6M?autoplay=1&mute=1&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Just replace the video ID 8LCnT-xrr6M with your video ID.

3. Removing (some) related videos from your autoplaying YouTube video

After September 25, 2018 it’s not possible to entirely disable related videos from being displayed after your video. But you can at least limit the related videos to only be played from the same channel as your embedded video. This way, you don’t need to promote your competitors. Here’s the official announcement from YouTube:

To remove related videos from your competitors, just add the parameter rel=0 to your embed code. Use the code below to embed an autoplaying video without related videos from other YouTube channels.

<iframe width="560" height="315" src="https://www.youtube.com/embed/8LCnT-xrr6M?autoplay=1&mute=1&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Just replace the video ID 8LCnT-xrr6M with your video ID.

4. Hiding the YouTube logo in your embedded video

Yes, you can actually hide the YouTube logo from your embedded video. Just add the parameter modestbranding=1 to remove the logo from the bottom right corner.

Use the code below to embed an autoplaying video without displaying the YouTube logo.

<iframe width="560" height="315" src="https://www.youtube.com/embed/8LCnT-xrr6M?autoplay=1&mute=1&modestbranding=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Just replace the video ID 8LCnT-xrr6M with your video ID.

There is a small disclaimer in the YouTube documentation about hiding to logo: “Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user’s mouse pointer hovers over the player.”

5. Embed YouTube videos without cookies

Working hard to be GDPR compliant? One step in the right direction could be to prevent YouTube from adding cookies when you embed a video. This is is not a parameter in the same way as in the other examples in this article; instead, you need to change the domain address in the embed code from

https://www.youtube.com

to

https://www.youtube-nocookie.com

Everything else should remain the same. Here’s an example of an embed code with an autoplaying YouTube video using the Privacy-Enhanced Mode:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8LCnT-xrr6M?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Just replace the video ID 8LCnT-xrr6M with your video ID.

Note that cookies, GDPR and privacy are complex matters. For more in-depth knowledge about the YouTube Privacy-Enhanced Mode, I recommend the blog post Embed YouTube videos without cookies by Per Axbom. If you want to be 100% in charge of the cookies generated by your embedded videos, you can host your videos on your own server or use a paid service like Vimeo.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: Autoplay videos with the Divi Video Module

👉 Free course: Create a website from scratch with Divi