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!
Join +2 640 subscribers!
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.
Limitations in some mobile devices. Autoplaying embedded YouTube video does not work in some mobile browsers because of restrictions from the manufacturers. In these cases, the user needs to initiate the playback by tapping the video play button. Here’s a statement from the YouTube documentation:
The HTML5 <video> element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it’s initiated by a user interaction (such as tapping on the player). Here’s an excerpt from Apple’s documentation:
“Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback.”
Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won’t work in all mobile environments.
In these casses, the autoplay string will be ignored and the video will be displayed as a regular embedded video.
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.
- 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 athttps://youtu.be/8LCnT-xrr6Mas an example video in this tutorial - Click the Share button below the video and click Embed in the popup
- 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.
- 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>
- 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>
Add the underlined text after the video ID and before the ending quotation mark
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:
- Enable the Visual Builder and click the grey + icon to insert a new Divi modiule where you want to embed your autoplaying YouTube video
- 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. - Paste your YouTube embed code that you created in step 1 in the Code field in the Content tab below the Text heading
- 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.
- 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.. - 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 & in the code. If someone from the Elementor team is reading this: Update your obsolete code validation, please! 😉 - 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.
💡 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..
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!
- Edit the page with the Gutenberg Block Editor and click the + icon in the top left corner to insert a new block
- 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. - Paste your YouTube autoplay embed code from step 1 in the Write HTML… field.
- 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.
- Edit the page or post with the Classic Editor
- 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.
- 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 - 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.
- Click the Publish or Update button to the right (or below) the Classic Editor and preview the page or post in frontend.
💡 Make sure that you have selected Text in the top right tab
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:
- Add a question mark ? after your video ID and before the first parameter, for example: VIDEO_ID?autoplay=1
- Add an ampersand & before the rest of your parameters, for example: VIDEO_ID?autoplay=1&mute=1&loop=1
- =1 means that the parameter is enabled (like all three parameters in the example above)
- =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.”
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
Very good and complete article! Thank you!
Thanks Massimo, I’m glad you liked it! 🙂