Display Video Based on Screen Resolution

[Mahesh_Gunaje]

Hello Team,

In my AEM component, Author can add 2 Video URL(DAM path) for desktop version, mobile version. Then I am displaying the video as mentioned below. Front end developer is hiding the video class based on some condition. Still, during the page load, 2 video's are loading in browser, resulting high page load time.

<video class="test-123">            

   <source src="${properties.videoURLForDesktop @ context='unsafe'}" type="video/mp4">

</video>

<video class="test-456">            

    <source src="${properties.videoURLForMobile @ context='unsafe'}" type="video/mp4">

</video>

How to restrict, not to load both video's. Instead, in Desktop version, load the Video for desktop only.

While googling, got to know about this link. But, dont want to use these JavaScript options.

https://stackoverflow.com/questions/54295607/changing-video-src-based-on-screen-size-with-javascript....

[Shashi_Mulugu]

@Mahesh_Gunaje maybe not direct aem post, but with no browser support, either have to use CSS or JS, or if you are using aem , if you requirement is to show responsiveness video, check if you can use DM with smartcrops, but requirement is to use different videos then either css or js

[Mahedi_Sabuj]

Considering your previous question regarding video streaming, it seems that you have a preference for NOT using the Adobe Dynamic Media, even though it could potentially be an effective solution. 

Hence, If I understand your requirement correctly, both videos are currently loading on the initial page load and then being hidden based on conditions using CSS. You can optimize it as follows:

Update your HTML to initially hide both videos:

<video class="desktop-video test-123" style="display: none">
  <source type="video/mp4"
    src="${properties.videoURLForDesktop @ context='unsafe'}" >
</video>

<video class="mobile-video test-456" style="display: none">
  <source type="video/mp4"
    src="${properties.videoURLForMobile @ context='unsafe'}">
</video>

Then, show the respective video based on the viewport size using CSS media queries:

/* Display the desktop video on screens wider than 768px (adjust as needed) */
@media screen and (min-width: 769px) {
  .desktop-video {
    display: block !important;
  }
}
/* Display the mobile video on screens 768px and narrower */
@media screen and (max-width: 768px) {
  .mobile-video {
    display: block !important;
  }
}

With this approach, both videos are initially hidden with inline CSS, and then you use CSS media queries to selectively display the appropriate video based on the viewport size. 

[Mahesh_Gunaje]

Thanks @Mahedi_Sabuj  for catching my previous post   Yes. Client is reluctant to pay for the Adobe Dynamic Media. (Don't ask me, why   )

As of now, we are using the concept of hiding the video by using CSS. But still, behind the scene, HTML page will load both 2 videos. I can see in the network tab. My team is thinking about Lazy loading of video.  Still checking the different possible ways.

Anyhow will pass your code snippet my team. Hoping for the best 

Thanks

[Mahedi_Sabuj · Accepted solution]

It is not achievable using just CSS to dynamically load a video based on the viewport. Behind the scene, HTML page will load both videos as you mentioned. To load a specific video, JavaScript solution is necessary.

To start, you can include both mobile and desktop video source as data-* attributes, and then use JavaScript to determine and set the video source based on the viewport. Instead of custom implementation, you can also utilize a JavaScript library to achieve this.