How to play gif or video depending on internet speed?

Question

I am currently creating this website that uses background video as a landing page, but they wanted to play gifs if internet speed is slow. They told me that there is this website called http://elevationchurch.com , which they need 99%, so I use this page as a link, but I don’t know how they would change it. I mean, although it was a media query, but then my laptop started showing me Gif and it is a 4k screen. I know that they are on WP, but I do not know if the plugin is or what.

What would be the best way to handle this functionality?

This is my code so far (very simple):

<section class="mainBG" style="background-image: url(assets/img/gihty.gif);"> <div class="d-flex align-items-center h-100 justify-content-center"> <div class="col-md-6 text-white text-center"> <p>LAST SERMON</p> <h1>SERMON TITLE</h1> <a href="#" class="btn btn-light btn-wide">WATCH NOW</a> <p class="lead mt-3">VIEW MORE SERMONS</p> </div> </div> <div class="col-md-12 text-white d-flex align-items-center justify-content-center py-2" style="background-color: rgba(17, 17, 17, 0.73); position: absolute; bottom: 0;"> <p class="my-auto text-center text-md-left">Join Us for Praise Party 2017</p> <button class="btn btn-light mx-3">Learn More</button> </div> </section> 

Answer 1

First, I would call this question to get Internet speed in Javascript (maybe you can use navigator.connection.downlink , see the documentation ).

Then, depending on the speed obtained, I would embed the correct element in the HTML.

  const speed = getSpeed(); const playable = document.getElementById("my-playable"); /* Play gif */ if (speed < minSpeed) playable.innerHTML = "<img src='...'>"; /* Insert an image (the gif) */ else playable.innerHTML = "<video src='...-'></video>" /* Insert the video */