Optimizing the video for mobile

Highlighted
Shopify Partner
7 0 0

Hey guys, I have this HTML code for my video. 

It works perfectly fine on the desktop, however isn't very good on mobile screen.

 

<div style="text-align:center;">
<video width="590" height="420" controls="controls">
  <source src="myvideofile.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

I've hidden it for mobile using this 

  @media only screen and (max-width: 425px) {
.custom__item {
  
  display: none;
}
  }

But of course, this makes all my "Custom content" sections to disappear. 

My questions is, how do I duplicate .custom_item class and make it something like .custom_itemvideo so I can hide only that one? Other solution might just be optimising the video for a mobile phone without hiding it.

 

Any help would be appreciated. Thanks!

0 Likes
Highlighted
Shopify Partner
207 38 47

Hello @generatorius,

 

Give id

<div style="text-align:center;" id="customVideo">
<video width="590" height="420" controls="controls">
<source src="myvideofile.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>


@media only screen and (max-width: 425px) {
#customVideo {

display: none;
}
}

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Contact me: https://www.fiverr.com/share/Q7V3o2
Email: wahabahmadghori@gmail.com

0 Likes
Highlighted
Shopify Partner
7 0 0

I don't know why, but it ruins my whole website when I add this code. 

 

0 Likes
Highlighted

Hello @generatorius,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
7 0 0

Hi, it's gardenpack.co.uk

0 Likes