CODEWITHSUNDEEP
jqueryhtmlcssvideohtml5-video
Chris Dutton
Chris Dutton

Reputation: 33

Display background image on mobile instead of the background video

I hope someone can help me. I am looking to change the video which currently plays on the hero panel on the homepage to show an image instead. Of course I can hide the video by using CSS but this would still mean the video would be loading in the background which is not what I want.

This is the html I have.

<video id="heroVideo" autoplay="" loop="" muted="" poster="../images/video-bg.jpg">
    <source src="../video/loop.webm" type="video/webm">
    <source src="../video/loop.mp4" type="video/mp4">
</video>

I have done the following which seems to work but wondered if there is a better way:

if (Modernizr.mq('only all and (max-width: 768px)')) {
    $('#heroVideo').detach();
}

Is this the right way of doing it or is there a better way.

Upvotes: 2

Views: 1193

Answers (1)

AndrewL64
AndrewL64

Reputation: 16311

Add this in your <head>....</head> section:

<script type="text/javascript">
    $(#heroVideo).remove();
</script>

Or just edit your current script and replace detach with remove like this:

if (Modernizr.mq('only all and (max-width: 768px)')) {
    $('#heroVideo').remove();
}

DIFFERENCE:

detach() : The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements.

remove() : Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

Upvotes: 1

Related Questions