QVV Video Playerv1.3.6

Responsive Example

Responsive video player example, based on CSS media queries.

Resize browser viewport and watch displayed video.

<qvv-video
  controls
  id="player-mobile"
  loop
  muted
  video="https://www.crafted.systems/demos/addendum.org/qvv-video/test-video-mobile.mp4"
  videofallback="https://www.crafted.systems/demos/addendum.org/qvv-video/test-video-mobile.mp4"
/>

<qvv-video
  controls
  id="player-desktop"
  loop
  muted
  video="https://www.crafted.systems/demos/addendum.org/qvv-video/test-video-desktop.mp4"
  videofallback="https://www.crafted.systems/demos/addendum.org/qvv-video/test-video-desktop.mp4"
/>

<style>
  #player-desktop {
    display: none;
  }
  @media (min-width: 769px) {
    #player-mobile {
      display: none;
    }
    #player-desktop {
      display: block;
    }
  }
</style/>