Display:none for video element, will it still be buffered?

Question

I have a website with a video playing below the header on the front page, the video is pretty large and I am using media queries to remove it from the mobile browsers etc.

It displays fine, just as I want.

But I wonder, if I simply set it to display:none, will it still be buffered in the background? So phone users will have a slower load time for no reason at all? How should I do it instead, if that's the case?

I searched for this question and I only found one remotely related. But there, the question was if the code would be loaded or not. And I can live with loading an extra line of HTML. So that's not the issue.

Normaly the browser don't load elements wich are loaded as "display:none;" But check it like j08691 told you. — MFGSparka, Mar 07 '17 at 15:43
If you don't play it dynamic through javascript it shouldn't. — sTx, Mar 07 '17 at 17:54
@j08691 - I am a bit unsure what to look for, the loadtime and size is the same at either screen size. — Robin, Mar 08 '17 at 10:00

score 2 · Accepted Answer · answered Mar 07 '17 at 16:07

2

To be on the safe side, I would first write a general CSS rule for the video container that has display: none in it, and then add a rule inside a media query (@media screen and (min-width: 768px) {...}) for screens above 768px (or whatever your breakpont is) that contains display: block.

That would be a mobile-first approach that makes sure it's not loaded on smaller screens.

answered Mar 07 '17 at 16:07

Johannes

53,485
15
52
104

2

Thanks for mobile-first tip - allthough, it does not directly answer the question? :-) – Robin Mar 08 '17 at 12:08
Until some time ago I was sure that an image/video *will* be loaded also on mobile devices if there is a general CSS rule with `display: block` first which is then followed by a media query for mobile devices with `display: none` for the same element. But then there was some discussion about this in another question, and it seems that there are already some newer browser versions which avoid loading the content in this case. I am not sure about this, so as I said, to be on the safe side, use this mobile-first approach - in this case I am sure the desktop content will not be loaded on mobile. – Johannes Mar 08 '17 at 12:25
Awesome! I guess that's the safest way then, thank you very much, I will do this way instead from now on! :-) – Robin Mar 08 '17 at 12:37

score 0 · Answer 2 · edited May 23 '17 at 12:17

It seems like Firefox(51.0.1 desktop) is loading images with display:none. Wouldn't it be better to detect if the device is a mobile device and only load the video if that isn't true?

Something like this:

//only load video if screen width is greater than 768px
if(screen.width > 768){
    $('#video-container').html(videoHtml);
}

where videoHtml is your video element.

And you can optionally load a lower resolution video on mobile devices:

//only load video if screen width is greater than 768px
if(screen.width > 768){
    $('#video-container').html(videoHtml);
}
else{
    $('#video-container').html(lowResVideoHtml);
}

But there are many other and better ways to detect if a device is a mobile device than looking at the screen width. See this question for some methods: https://stackoverflow.com/a/3540295/7353781

Display:none for video element, will it still be buffered?

2 Answers2