How do I add an autoplay video to my website?

The Rocketspark video block allows you to upload videos to your webpage. However, there are some instances where you may want the video to autoplay in the background.  If you want to have a video autoplay with sound off as your Stack Background, follow this help guide. If you do not want your video as a Stack Background you will need to add some code to the Video block to get your video to autoplay. 

Autoplay with Vimeo Pro Account

If the video is uploaded to Vimeo and you have a paid Vimeo Pro Account this can be achieved through the Rocketspark video block.

1. To create an autoplay background video on Rocketspark your video needs to be hosted on Vimeo. You can create a Vimeo account here.
2. Once your video is published, add a Rocketspark video block to your webpage and paste in the video link.
3. To make the video autoplay you will need to add ?autoplay=1&muted=1 to the end of the video’s URL and click Save.

This will make the video autoplay on your site with no sound but with controls.

If you're wanting the video to autoplay, but with no controls, you'll need to add the following text to the end of the Vimeo URL instead of ?autoplay=1&muted=1

You will need to use:

?background=1&muted=1

Most modern browsers prevent videos from auto-playing with sound (unless the user has already allowed it on your site before), which is why &muted=1 is necessary.

Autoplay with Vimeo account 

If you're after more controls for your Vimeo video or don't have a pro account you may want to embed it in an HTML block instead.

1. Find the video you want to embed on your site and click Share
   
   
   
2. Click on + Show options besides the Embed box:
   
   
   
3. Copy the code, then go to your Rocketspark site, navigate to where you want the video to be embedded and add a Code block.
   
   
4. Paste the code into the Code block
   
   
5. IMPORTANT: If your video has sound you will need to enter the following code snippet after the Video link within the above code you have just pasted. 
   

   &muted=1

   e.g the Code you have copied looks like this:  

   <div style="padding:56.25% 0 0 0;position:relative;"><iframe 
   src="https://player.vimeo.com/video/285914372?autoplay=1&loop=1
   &color=FF0000&title=0&byline=0&portrait=0" style="position:absolute;top:0;
   left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; 
   picture-in-picture" allowfullscreen></iframe></div><script 
   src="https://player.vimeo.com/api/player.js"></script>

   
   The Code should then look like this with the extra bit of code entered in: 

   <div style="padding:56.25% 0 0 0;position:relative;"><iframe 
   src="https://player.vimeo.com/video/285914372?autoplay=1&muted=1&loop=1
   &color=FF0000&title=0&byline=0&portrait=0" style="position:absolute;top:0;
   left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; 
   picture-in-picture" allowfullscreen></iframe></div><script 
   src="https://player.vimeo.com/api/player.js"></script>

6. Click Publish. 

It is important you add the extra bit of code in if your video does have sound to ensure it does auto-play as most browsers will block videos with sound from auto-playing.

If you want even more control over the behaviour of the video, the full list of Vimeo parameters can be found here: Using Player Parameters

Autoplay with YouTube

Unfortunately, YouTube videos can't be made to autoplay in the same way as Vimeo videos. To autoplay a YouTube video, you'll need to add some code to your site.

1. Find the YouTube video you want to embed and click on Share
   
2. Click on Embed and select the options you want on the video, then copy the code.
   
3. Paste the code into a Code block, and edit any parameters you want. Common ones to change are width and height. To make it autoplay, add ?autoplay=1&mute=1 after the YouTube URL. A full list of parameters can be found here: Supported Parameters. Your code should look similar to this:

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

4. Click Publish and your video should now autoplay.

If you want your video to be responsive, you will need to wrap it in the following code, replacing [Youtube Embed Code] with the code above. Ensure that your width and height settings are large enough to expand with the container.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'>[Youtube Embed Code]</div>

Please note: to get a video to autoplay on your website, the sound will need to be muted. If the sound is not muted, the video will not automatically play. It will play with sound on the editor but when going to the live site it will not play. 

If you have any questions at all feel free to reach the customer support team on support@rocketspark.com - How do I contact Rocketspark for support?