Vertical video on mobile and horizontal video on desktop

Open bagaweb opened this issue 2 years ago • 4 comments

Hi I was wondering which is the proper way to display a vertical video on mobile devices and an horizontal video on desktops.

Something like this:

<video id="vertical" class="video-js" preload="auto" autoplay loop muted playsinline>
<source src="video-640x720.mp4" type="video/mp4">
</video>

<video id="horizontal" class="video-js" preload="auto" autoplay loop muted playsinline>
<source src="video-1280x720.mp4" type="video/mp4">
</video>

Dec 05 '23 10:12 bagaweb

Hi, did you find a solution to your problem?

Dec 10 '23 20:12 nikitashmidt

Hello, not yet.

Dec 11 '23 09:12 bagaweb

Loading the source conditionally is one option

const src = /* condition for mobile */ ? 'video1.mp4' : 'video2.mp4';
player.src({ src, type: 'video/mp4});

Dec 12 '23 08:12 mister-ben

Thanks Mr. Ben, would you please share a working codepen?

Dec 12 '23 13:12 bagaweb