Supported Versions
The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.
In This Article
- Embedding Video Codes
- Locating the Video Embed Codes
- Additional Methods for adding Videos to your Pages (Video Content Block)
Embedding Video Codes
When adding embed codes provided by your video provider, please note that you need to be in HTML or code view, otherwise the videos will not work.
View instructions on how to switch to this view
Select your theme:
-
Turbo/Flex/Artisan
No additional edits are required for the Turbo, Flex or Artisan themes, you can simply embed the YouTube or Vimeo snippet.
-
Responsive & Mobilia
For Responsive versions before 6.3.0 and for Mobilia versions before 5.3.0. What theme version am I using?
To embed a resizable YouTube or Vimeo video, you'll want to wrap the embed code snippet with an extra div tag to have it resize for all devices. Here is an example below:
<div class="video-container"> <iframe width="560" height="315" src="http://www.youtube.com/embed/HQId6xDGEVo" frameborder="0" allowfullscreen=""> </iframe> </div>
For Responsive 6.3.0+ and Mobilia 5.3.0+
No additional edits are required, you can simply embed the YouTube or Vimeo snippet.
-
Retina & Parallax
For Retina versions before 4.2.3 and for Parallax versions before 3.3.2. What theme version am I using?
To embed a resizable YouTube or Vimeo video, you'll want to wrap the embed code snippet with two extra div tags to have it resize for all devices. Here is an example below for YouTube videos:
<div class="video-container youtube"> <div> <iframe width="560" height="315" src="http://www.youtube.com/embed/HQId6xDGEVo" frameborder="0" allowfullscreen=""> </iframe> </div> </div>
Here is an example below for Vimeo videos:
<div class="video-container vimeo"> <div> <iframe src="//player.vimeo.com/video/32918908?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </iframe> </div> </div>
For Retina 4.2.3+ and Parallax 3.3.2+
No additional edits are required, you can simply embed the YouTube or Vimeo snippet.
Locating the Video Embed Codes
To get a Youtube video code embed:
- Go to the YouTube video you want to embed.
- Under the video, click Share .
- Click Embed.
- From the box that appears, copy the HTML code.
- Paste the code into your blog or website HTML.
To get a Vimeo video code embed:
Additional Methods for adding Videos to your Pages
In addition to inserting the video embed code directly into a page/product through the admin, you can make use of different templates in your theme that include a Video content block.
The Video content block is the same as the Video homepage section.
In all of our themes, the page.details template includes the Video content block.
In the Turbo, Retina, Responsive, and Artisan themes, the product.details template includes the Video content block.
In the Flex theme, all of the product templates include the Video content block.