Images, Video, and Other Media

Embedding a Video on a Page

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

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.

html-view-button.png

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&amp;byline=0&amp;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:

  1. Go to the YouTube video you want to embed.
  2. Under the video, click Share .
  3. Click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your blog or website HTML.

To get a Vimeo video code embed:

​Go to the video page and click the Share button that appears when you hover your mouse over the video player. In the pop-up window, you'll see a field containing an embed code for the video. Just copy the magic code and paste it into your website
 

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. 

Related articles