{"id":39354,"date":"2021-06-17T16:57:25","date_gmt":"2021-06-17T20:57:25","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=39354"},"modified":"2021-06-18T10:32:08","modified_gmt":"2021-06-18T14:32:08","slug":"autoplay-and-loop-youtube-videos-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/autoplay-and-loop-youtube-videos-in-wordpress\/","title":{"rendered":"Autoplay and Loop YouTube Videos in WordPress"},"content":{"rendered":"\n

Videos are an easy way to convey information quickly to your audience. Having a video on your website will boost engagement, and lengthen the amount of time users spend on your site and thinking about your brand.<\/p>\n

There are many different ways to work with videos. You could upload a video directly to your WordPress installation but we do not<\/strong> recommend this. Loading videos consumes more server resources than other types of content. The process will likely overwhelm your web hosting server, negatively impacting your website speed and performance.<\/p>\n

Generally embedded YouTube videos only play once a button is clicked. At the end, a new video will start or suggested videos will appear. While this default behavior works for many websites, you may want your site to display videos differently.<\/p>\n

In this article we will show you how to autoplay and loop YouTube videos in WordPress, or watch the video below for the TLDR.<\/p>\n

<\/iframe><\/p>\n<h2 id=\"autoplay-and-loop-youtube-videos-in-wordpress\">Autoplay and Loop YouTube Videos in WordPress<\/h2>\nYour initial instinct may be to search for a plugin to assist with this process. There are a few plugins that claim to offer this functionality, but in our testing they did not work as advertised. Luckily, you can change how videos play on your website with a small addition to the embed code provided by YouTube.<\/p>\n<h3 id=\"how-to-test-wordpress-changes-safely\">How to Test WordPress Changes Safely<\/h3>\nIf you’re nervous about messing up the entire page – don’t panic! There are a few things you can do to ensure your hard work isn’t lost.<\/p>\nFirst, you can click the Text<\/b> tab in the editor, copy all the code, and paste into a new page in your WordPress install. Now you have a backup of the page right there in case you need to start over.<\/p>\nThis might be a good opportunity to take a backup of your entire site as well, using a WordPress <a href=\"https:\/\/www.boldgrid.com\/wordpress-backup-plugin\/\">backup plugin<\/a>. Some <a href=\"https:\/\/www.boldgrid.com\/wordpress-hosting\/\">WordPress hosting<\/a> plans include backups, but it’s strongly recommended you keep a local backup of your website in case of unexpected data loss.<\/p>\nIf you are making more complex changes to your website, we recommend using Cloud WordPress. Cloud WordPress provides <a href=\"https:\/\/www.boldgrid.com\/free-wordpress-sites-demo\/\">free WordPress demos<\/a> in a sandbox environment so you can experiment freely. If you accidentally break a website, simply delete it and start fresh within minutes.<\/p>\n<h3 id=\"step-by-step-instructions\">Step by Step Instructions<\/h3>\nNow it’s time to get the actual code to autoplay and loop YouTube videos in WordPress.<\/p>\nGet Embed Code from YouTube<\/strong><\/p>\n<ul>\n<li>Open YouTube and find your video<\/li>\n<li>Click the Share button below the video<\/li>\n<\/ul>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/share-youtube-video.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-39402\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/share-youtube-video.jpg\" alt=\"Share YouTube Video\" width=\"458\" height=\"92\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/share-youtube-video.jpg 458w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/share-youtube-video-300x60.jpg 300w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/p>\n<ul>\n<li>In the popup, click Embed<\/li>\n<\/ul>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/embed-youtube-video.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-39404 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/embed-youtube-video-300x154.jpg\" alt=\"Get Embed YouTube Video Code\" width=\"300\" height=\"154\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/embed-youtube-video-300x154.jpg 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/embed-youtube-video.jpg 647w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<ul>\n<li>Copy the code from the next screen using the button at the bottom of the panel<\/li>\n<\/ul>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/copy-youtube-embed-code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-39403\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/copy-youtube-embed-code.jpg\" alt=\"Get Embed YouTube Video Code Example\" width=\"300\" height=\"339\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/copy-youtube-embed-code.jpg 528w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/copy-youtube-embed-code-266x300.jpg 266w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a> \nAdd Embed Code to WordPress<\/strong><\/p>\nIn the WordPress dashboard open the page where you want to add the video. The code snippet will need to be added using the Text tab.<\/p>\nOnce you’re in the Text view it can be tricky to find the correct location in the code. Before switching, it’s helpful to highlight some text near where you want the video to appear. After clicking the Text tab that text will still be highlighted to give you a sense of where you are.<\/p>\nLook for the column where you want the video to appear and paste the code copied from YouTube. If any code accidentally is placed outside a column, your website layout will shift unexpectedly so look for code similar to what’s shown here:<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/iframe-code.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-39429\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/iframe-code.png\" alt=\"YouTube iframe code example\" width=\"1338\" height=\"104\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/iframe-code.png 1338w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/iframe-code-300x23.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/iframe-code-1024x80.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2021\/06\/iframe-code-768x60.png 768w\" sizes=\"auto, (max-width: 1338px) 100vw, 1338px\" \/><\/a><\/p>\nUpdate Embed Code<\/strong><\/p>\nNow we can modify this starting code to autoplay and loop YouTube videos in WordPress. The portion we’re going to change is the src<\/strong> link. More specifically, we’re going to add code to give YouTube additional instructions on how to display our video.<\/p>\nAs you’re working with this example code, be sure to replace our video ID with yours. The video ID is the random letters and numbers found after \/embed\/ in the link. In this example, the video ID is xp_s4zekfz4.<\/p>\n<pre>src=\"https:\/\/www.youtube.com\/embed\/xp_s4zekfz4\"<\/pre>\nThe snippet above shows the src YouTube gives us to start with, and the snippet below has the new code applied. Just be sure to replace our video ID with yours in both places<\/em> it now appears. The difference is <code>?autoplay=1&playlist=xp_s4zekfz4&loop=1<\/code> was added to the end.<\/p>\n<pre>src=\"https:\/\/www.youtube.com\/embed\/xp_s4zekfz4?autoplay=1&playlist=xp_s4zekfz4&loop=1\"<\/pre>\nNext, double check the iframe code section includes <code>allow=\"autoplay;\"<\/code>. It should be there from the original YouTube code, but if you don’t see it please add it now inside the iframe.<\/p>\nThe video below is queued up to show the final code so you can compare.<\/p>\n<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/xp_s4zekfz4?start=186\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3 id=\"troubleshooting\">Troubleshooting<\/h3>\nHow To Enable Autoplay in FireFox<\/strong><\/p>\nFirefox and some other browsers do not<\/strong> allow autoplaying media that has sound, because it’s considered a poor user experience. You can add <code>&mute=1<\/code> to mute the sound, and your video will autoplay in Firefox, but this does have the unfortunate side-effect of ruining a good Rickroll.<\/p>\nWe hope you found this information helpful. Please let us know your comments in the section below and we’ll see you at the beginning, friend.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"Videos are an easy way to convey information quickly to your audience. Having a video on your website will boost engagement, and lengthen the amount of time users spend on your site and thinking about your brand. There are many different ways to work with videos. You could upload a video directly to your WordPress […]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Autoplay and Loop YouTube Videos in WordPress","bgseo_description":"In this article we will show you how to autoplay and loop YouTube videos in WordPress websites. Having a video will lengthen the time users spend on your site.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[],"class_list":["post-39354","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/39354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=39354"}],"version-history":[{"count":40,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/39354\/revisions"}],"predecessor-version":[{"id":39482,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/39354\/revisions\/39482"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=39354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=39354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=39354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}