is there a way to stop content from loading in min-width screens

Question

I'm making a responsive website and I have a video background for the first screen, I want to hide the video on the mobile devices to make the site load faster. for sure display: none; will not disable the content from downloading.. I tried those two javascript to disable the content from loading the content on smaller screens but it still loads on the background:

if (screen.width < 768){
var removeelement = document.getElementById("videoClass");
removeelement.innerHTML = "";
}

Or :

$("#videoClass").remove();

they do the same work of CSS tag : display-none. Is there any way in javascript to prevent the content from loading the content in the background ?

Its depend on how you are loading video, Add condition before video loading. — Laxmikant Dange, Oct 18 '15 at 09:41
Read [link 1](http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading) and [link 2](http://timkadlec.com/2012/04/media-query-asset-downloading-results/) — Alex, Oct 18 '15 at 09:45
I would make an if statement checking if the site is viewed from a mobile or not. Then, Inject the video code accordingly. — Vandervidi, Oct 18 '15 at 09:48

Muhammad Ashikuzzaman · Answer 1 · 2015-10-18T13:42:39.383

1

Add the bellowed code which will make html of the selected div empty.

if(window.innerWidth <  768 )//screen.width < 768 
  {
   $("#videoClass").html("");
  }

edited Oct 18 '15 at 13:42

answered Oct 18 '15 at 09:42

Muhammad Ashikuzzaman

3,075
6
29
53

score 1 · Answer 2 · answered Oct 18 '15 at 09:49

1

you can use:

if (screen.width < 768){
    $("#videoClass").empty();
}

answered Oct 18 '15 at 09:49

Joseph Khella

695
1
9
26

score 0 · Accepted Answer · answered Oct 18 '15 at 10:32

I think the bist way to solve this is like what Laxmikant Dange and VanderVidi said , All those javascripts and jqueries are fine and working but the problem is with how I am loading the video.. I used this code for downloading the content only on screens with width>768

<video id="videoClass">
<!-- removed the content from here -->
</video>
<script>
$(document).ready(function() {
if (screen.width > 768){
var showElement = document.getElementById("videoClass");
//pasted the content here:
showElement.innerHTML = '<source src="video.mp4" type="video/mp4">';
}
});
</script>

this solved the problem and the content loads only on bigger screens now.. Thank you so much for the help.

is there a way to stop content from loading in min-width screens

3 Answers3