How to play gif or video depending on internet speed?

Question

I am currently building this website that uses a video background as a landing page but they wanted to play a gif if the internet speed is slow. They told me that there is this website called http://elevationchurch.com that is 99% what they want so i am using that page as a reference but dont know how they would change that. i mean i though it was a media query but then my laptop started showing me the Gif and is a 4k screen. I know they have it on WP but i dont know if is a plugin or what.

What would be the best way to tackle a funcionality like that ?

This is my code so far (is 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 refer to this question in order to obtain the internet speed in Javascript (you can probably use navigator.connection.downlink, see the documentation).

Then, depending on the speed obtained I would insert correct element into 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 */