Responsive HTML5 video

I am trying to use media queries in html to detect if the page is on phone or desktop than video will play different clip. However, It is not really working. I wonder how to fix it... the idea is from here https://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video

<video controls preload="none" loop muted autoplay poster='img/first_frame.png' class="fullscreen-bg__video" onclick="this.play(); ">
<source src="video/TankingTanksConversion04.mp4" type="video/mp4" media="all and (max-width:480px)">
<source src="video/TankingTanksConversion03.mp4" type="video/mp4">
</video>

Open in new window


Thanks
Brian LinDesignerAsked:
Who is Participating?
 
lenamtlCommented:
You don't have to detect it, I should automatically display correctly based on device and browser. have more than one format will help.

Be aware that this may not play well on small device due to bandwidth restriction, specially for Auto play, plus some browser may not display the video at all.
Also don't forget to put a poster as image replacement for this case.

<video controls preload="none" poster="poster.png"> 
   <source src="video1.mp4" type="video/mp4"> 
   <source src="video1.webm" type="video/webm"> 
  <source src="video1.ogv" type="video/ogv"> 
</video> 

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.