How to make videos responsive on shopify with code

 

HTML5 SHOPIFY RESPONSIVE VIDEO TUTORIAL

 Heres how to make videos responsive on shopify with code, all you need to do is add the video code to your page and than add the css to your liquid.css file in shopify.  Please watch the full video tutorial here ---> 

$5.95/month! Build your site on the Cloud today!

 

On how to add responsive videos in photoshop. Subscribe and follow my youtube for more stupid simple shopify tips and tricks!

Add this line of code to your shopify page

 

<div class="responsive-video">

  <iframe width="560" height="315" src="YOUTUBE VIDEO LINK" frameborder="0" allowfullscreen></iframe>

</div>

 

  

Add this to your liquid.css

 

/* -- Responsive video embed -- */

.responsive-video {

  padding-bottom: 56.25%; /* for 16:9 ratio */

  padding-top: 25px;

  position: relative;

  height: 0;

}

.responsive-video iframe,

.responsive-video object,

.responsive-video embed {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}