Making custom html content Video Responsive across devices

Solved
ShahzadIftikhar
Shopify Partner
11 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

KetanKumar
Shopify Partner
20459 2116 7715

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShahzadIftikhar
Shopify Partner
11 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 

KetanKumar
Shopify Partner
20459 2116 7715

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShahzadIftikhar
Shopify Partner
11 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
ShahzadIftikhar
Shopify Partner
11 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
ShahzadIftikhar
Shopify Partner
11 1 3

@KetanKumar 

Thanks a lot for your help!

KetanKumar
Shopify Partner
20459 2116 7715

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
uniquevibesshop
Tourist
11 1 1

Hi Shahzadlftikhar,

I used your latest code for my shopify store, and the responsiveness for mobile devices worked well.

Before the desktop version also worked well, but now it somehow is not formated correctly anymore.

This is our website: www.uniquevibes.shop

 

Thanks and kind regards,

Ramon

Unique Vibes Shop 

ShahzadIftikhar
Shopify Partner
11 1 3

Hi @uniquevibesshop 

I'm looking into your issue. Will let you know shortly if i get any solution.

Thanks 

0 Likes