Different header video for desktop and mobile

Store Design
, ,
1

Hi there,

I currently have a landscape video auto-playing on my website landing page (Dawn theme) and I would like to use a different video (portrait version of the original video) for mobile view but I’m unsure how to adjust the code I have to make this work. Can someone help me with adjustments to this code so I can have a different video for each screen size?

Below is the code I used to create a custom liquid for the homepage video:

<div class="section-homepage-video">
  <div class="posrel">
<video autoplay muted loop playsinline class="video-homepage">
<source src="LANDSCAPE VIDEO URL IS PLACED HERE" type="video/mp4">
</video>
  </div>
</div>
{% schema %}
{
"name": "Homepage Video",
"class": "index-section index-section--flush",
"settings": [],
"presets": [{
"name": "Homepage Videos",
"category": "Text"
}]
}
{% endschema %}
{% stylesheet %}
.section-homepage-video{
width:100%;
}
.video-homepage{
width: 100%;
height: auto;
} 
  <style>
.posrel{position:relative;}
video{display: block; margin: 0 auto; width: 100%; height: 50%; z-index:1; position:relative;}
</style> 
  
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
1 Like
2

Thank you so much for your prompt response!

I’ve pasted in the media queries which is definitely the right start but nothing has changed because I’m unsure where I should include the second URL (video link for mobile) in my initial liquid code. Could you give me guidance on this?

And I assume I also need to somehow indicate which video is for which screen size in this code so that additional CSS code knows what video to reference for each break point. If you could help me with this too that would be amazing!

1 Like
3

you’ll need to utilize CSS media queries. Within the media query, target the video element and modify its src attribute to point to the appropriate video file for the respective screen size. Additionally, you can adjust the video dimensions to ensure it fits the screen properly.