Making custom html content Video Responsive across devices

Solved
Highlighted
Shopify Partner
6 1 3

I recently added a video using custom html content. But it is not responsive. It is very nice on desktop but not on mobile and tabs. 

Here is the link to my store:

https://ketooq.myshopify.com/?key=9018ba418bdaab9541aab08bff00a55ec1ef471535cff3ee49c9e6b339161242

and

this is this the code i applied:

<video width="1250" height="650" loop="" muted="" autoplay="autoplay" preload="" id="vid">
controls="">
<source src="https://cdn.shopify.com/s/files/1/0399/0886/8258/files/Keto_Kaffee_hoch_81d94d8c-f495-4cbd-b0c9-5c04..." type="video/mp4">
</source></video>

If anyone could help me with this.

Thanks

1 Like
Highlighted
Shopify Partner
5868 860 1967

This is an accepted solution.

@ShahzadIftikhar 

Thanks for your post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

@media only screen and (max-width: 768px) {
audio, canvas, progress, video {
    width: 100%;
}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
6 1 3

Hi @KetanKumar 

Thanks for responding to my post, 

I tried by adding your code but it did not work and width of video decreased on desktop also, can you please give me another code that works ?

Thanks 

1 Like
Highlighted
Shopify Partner
5868 860 1967

@ShahzadIftikhar 

Thanks for the details. 

i have updated my previous code can you please add again

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Shopify Partner
6 1 3

Hi

@KetanKumar  

Great! it works. Now it is good on desktop and mobile, but it is still not good on tablet. Can you please update code again? 

Thanks

0 Likes
Highlighted
Shopify Partner
6 1 3

This is an accepted solution.

Hi 

@KetanKumar 

Finally i got the solution. I entered this code and now it is fully responsive across all devices.

@media only screen and (max-width: 768px) {
audio, canvas, progress, video {
    width: 100%;
  height: 100%;
}

}
@media only screen and (min-width: 480px) {
audio, canvas, progress, video {
    width: 200%;
  height: 200%;
}
}
0 Likes
Highlighted
Shopify Partner
6 1 3

@KetanKumar 

Thanks a lot for your help!

1 Like
Highlighted
Shopify Partner
5868 860 1967

@ShahzadIftikhar 

Thanks for your compliments.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes