Responsive Images for Video Poster

[oloolo]

I have a page with two different videos and different aspect sizes depending on whether someone accesses my site with a mobile device or on desktop. I would like to not only offer different videos but also different posters (stills)

<video controls height="100%" width="100%" poster="/image1.png">
<source src="https://xyz.com/1.mp4" type="video/mp4" media="all and (max-width: 444px)" > 
<source src="https://xyz.com/2.mp4" type="video/mp4" media="all and (min-width: 445px)" > 
</source>
</video> 

What can I do to integrate image2.png and load it with video 2.mp4

[chris_2080]

hint: specify a transparent image as the actual poster image

in css change it in media query

https://codepen.io/chris3000/pen/wXBwyr

[Author]

Posts