Solved

Different Background Video On Mobile and Desktop

Sinanali
Tourist
8 0 0

So I have written code to play video on on my website 

Heres the code : 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="videolink"
type="video/mp4">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
</video>

 

I want to display different videos on desktop and mobile versions. Here are the link for both videos

 

 

Accepted Solutions (2)

Guleria
Shopify Partner
3084 604 862

This is an accepted solution.

 <style>
video{
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

.deskvideo{

display: block;

}

.mobvideo{

display: none;

}

@media screen and (max-width: 7680px) {

.deskvideo{

display: none;

}

.mobvideo{

display: block;

}

}
</style>
<video class="deskvideo" muted autoplay playsinline loop>
<source src="videolink"
type="video/mp4">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
</video>

<video class="mobvideo" muted autoplay playsinline loop>
<source src="videolink"
type="video/mp4">
<source src="Mobile-video-url-here"
type="video/mp4">
</video>

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Guleria
Shopify Partner
3084 604 862

This is an accepted solution.

My mistake please replace this line.

@media screen and (max-width: 7680px) {

with this
@media screen and (max-width: 768px) {

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 4 (4)

Guleria
Shopify Partner
3084 604 862

This is an accepted solution.

 <style>
video{
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

.deskvideo{

display: block;

}

.mobvideo{

display: none;

}

@media screen and (max-width: 7680px) {

.deskvideo{

display: none;

}

.mobvideo{

display: block;

}

}
</style>
<video class="deskvideo" muted autoplay playsinline loop>
<source src="videolink"
type="video/mp4">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
</video>

<video class="mobvideo" muted autoplay playsinline loop>
<source src="videolink"
type="video/mp4">
<source src="Mobile-video-url-here"
type="video/mp4">
</video>

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Sinanali
Tourist
8 0 0

I pasted the links but it kinda doesnt work

Guleria
Shopify Partner
3084 604 862

This is an accepted solution.

My mistake please replace this line.

@media screen and (max-width: 7680px) {

with this
@media screen and (max-width: 768px) {

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Lift_Nation
Visitor
1 0 0

Where do I have to paste this code? In sections or assets? I am not much of a programmer.