In order to add videos from Vimeo or YouTube to your product pages, product descriptions, page content, or other locations on your site, please follow these steps:
1. Click the Online Store link in the left menu in your Shopify dashboard, then click Themes. Look for the ShowTime theme.
2. Click the the Actions button and choose Edit Code from the drop-down menu as shown below.
3. Open the Assets folder and locate the style.css.liquid file. Click it to open it in the built-in editor.
4. Scroll to the very bottom and add this code:
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
5. Now, when you want to embed a video on your page, grab the embed code from YouTube or Vimeo, go in to code view in the Shopify editor by clicking on the "<>" button, and paste your embed code within a special div tag. Like this:
<div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> </div>
Your video will now be responsive and will adapt to the width of the container element you put it in!
Comments
0 comments
Article is closed for comments.