How to make videos responsive on shopify with code

How to make videos responsive on shopify with code

  • By - photohack Lovers
  • 18 October, 2021

 

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!
Video link

 

How to make videos responsive on shopify with code

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%;

}

Leave a comment

Please note, comments must be approved before they are published

Instant Download

Download your Digital assets instantly!

Quality Products

We ensure the product quality that is our main goal

Commercial Use

Comes with personal and commercial use.

Free Tutorials

We provide Free Tutorials to help you design better.