1

I understand using media queries and display:none to hide content for mobile. The problem is that the content still downloads. I found this older post that has a similar issue, but hoping for more direct and up to date information.

This is the scenario I am trying to fix.

Desktop - 3 embedded YouTube videos, all display:block
Mobile - 1 embedded YouTube video displays, the other two are display:none

On mobile, this uses a lot of unnecessary requests and resources for the extra two videos. Of course I can just remove the two extra videos on desktop and mobile but before that, I'd like to know if/how I can configure the site to not load the second and third videos for mobile.

Rob T
  • 561
  • 3
  • 10

1 Answers1

2

There is a concept called RESS, originated in 2011 by Luke Wroblewski (who came up with the Mobile First design approach) which stands for:

REsponsive design + Server Side components

The idea above is to use a server side technology (eg. PHP) to detect a mobile browser agent and then serve the mobile version of the page's markup instead of the desktop version.

If you were going to try this approach with PHP in 2011, then you'd probably want to consider trying it with Javascript in 2020. Right?

And you can, quite easily, with the following steps:

  1. Your default version of the page will contain only one YouTube video embed.
  2. When the page loads, you'll use javascript to examine the browser's user-agent string.
  3. If your javascript detects that a visitor's browser is not a mobile browser then you can use javascript to modify your page after loading to include the additional 2 YouTube video embeds.

You'll need to have a look at an updated list of browser user-agent strings for 2020, but you can get quite a long way by assuming that if a user-agent string contains the word Mobile, it's for a mobile browser (N.B. that doesn't include tablets!) and if it doesn't, it isn't.

Consequently, you can use: 

if (navigator.userAgent.indexOf('Mobile') < 0) {

  addVideoEmbeds(); // <= Your function adds two additional Youtube embeds to the DOM

}
Rounin
  • 2,385
  • 2
  • 17
  • 35