Su carrito actualmente está vacío.

How to make videos responsive on shopify with code

How to make videos responsive on shopify with code

  • By - photohack Lovers
  • 18 October, 2021

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

Video link



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

}

Dejar un comentario

Por favor tenga en cuenta que los comentarios deben ser aprobados antes de ser publicados

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.