Level 7

Solved

Display Video Based on Screen Resolution

Forum|Forum|2 years ago
September 11, 2023
2 replies
2381 views

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>

</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#:~:text=1%20Answer&text=Just%20get%20the%20viewport%20size,to%20see%20the%20video%20change.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Mahedi_Sabuj

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.

Shashi_Mulugu

Community Advisor

@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

Community Advisor

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:

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) */
@590883 screen and (min-width: 769px) {
.desktop-video {
display: block !important;
}
}
/* Display the mobile video on screens 768px and narrower */
@590883 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.

Mahedi Sabuj

M

Mahesh_GunajeAuthor

Level 7

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

Community Advisor

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.

Mahedi Sabuj

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded