Video: Adding a full-width autoplay and looping video

This customization allows you to add a full-width autoplay and looping video on your homepage. The technique uses the standard Rich Text section module in Pipleline 2.x and above with the exception of making the content full-width.

Note: YouTube has recently added a new info bar at the top of embedded videos, you'll see this when you mouse over the video or in a loop when the video ends. For aesthetic concerns, consider using a Vimeo video instead. There are references to Vimeo in this article. 

In this example we will use a standard YouTube embed code with minor modification to allow looping and autoplay. There are notes at the bottom if you'd like to use a Vimeo video.

Step 1

First, you'll need to create a regular Page in your Shopify page editor

https://myshopify.com/admin/pages

Use the code view icon in the toolbar to toggle code view (1), you're in code view mode when the other icons disappear:

85615e833ad8018d8bdff01f303b4461.png

Your YouTube video ID is this part after v=

For this example, the video ID is:

3v37tK6BuO0

We will paste a standard YouTube embed code with a minor change here to allow autoplay and looping. For your code (2), you'll need something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/3v37tK6BuO0?&amp;loop=1&amp;playlist=3v37tK6BuO0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;title=&amp;autoplay=1&amp;fs=0&amp;controls=0" frameborder="0" allowfullscreen=""></iframe>

For the loop to work you need to add your video ID in two places - Notice I have that ID after the first src= section and then again after playlist=

I've highlighted both places where your own video ID will be used:

Save your page. 

Step 2

Open your Code Editor:

https://myshopify.com/admin/themes/current

In the Sections folder, choose "Add a new section"

Call it:

index-page-full

Example:

Erase all the default code on the right-side:

Replace the code with all the code from this file (click link to open the file):

https://gist.githubusercontent.com/whistlerbrad/1fc2e2b5ce0bf8a4a9cf19b3ecec2079/raw/08507d6df84d924b3769b1b5f5937226db009b15/index-page-full

Save your new file.

Step 3

Open your Theme Editor:

https://myshopify.com/admin/themes/current/editor

Add section - Under the video group, you'll see a new section called "Rich text Full-width", add that.

Next, chose your page in the drop-down - That's the video page you created in Step 1:

You can uncheck the "Show page title" if it's not needed. 

Result - Full width YouTube video with Autoplay and looping:

Save your theme changes.

This will give you a  full-width standard YouTube embed which is responsive to the size and width of the browser or device.

Notes

Since it's a YouTube video, it won't autoplay on mobile devices. That's to help limit the data used on mobile devices:

https://developers.google.com/youtube/iframe_api_reference

"Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments."


Vimeo Videos

You'll follow the same steps with with the exception of the code used in the Page you create.

Vimeo video ID is always after the /video/:

If a video is not in an album, then it's just the number:

Our example Vimeo video ID:

50402760

For Vimeo, you can use this code:

<iframe src="https://player.vimeo.com/video/50402760?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

You only need to change the video ID in one place. Vimeo is actually much easier. 

Still need help? Contact Us Contact Us