Javascript to stop vimeo video meme

Stop vimeo video with JavaScript when inactive

How to use JavaScript to stop/pause a vimeo video when it should be inactive

My latest project had me coding a product/service walk-through for a TV production firm that potential guests could use to better navigate and comprehend the various segments produced as well as the firm’s production cycle.  Since there are various segments produced and then distributed in various markets and by several mediums, it was important that each segment description come with an example video for potential guests to view.  The problem was that each video was in a modal or tab, and when the tab or modal was closed/switched/condemned to the abyss, the video would keep on playing as if it were still on the screen – forcing viewers to click through all of the tabs and modals to relocate it in order to pause it. So I needed to figure out how to stop the Vimeo video with JavaScript

After a ton of research and trial and error I finally created a JavaScript method that will pause the video using the Vimeo API.  So take a seat – but you’ll only need the edge (read that part with a monster truck rally commercial in mind – trust me, it’s worth it) as we explore how it’s done.

A little background

The page I created for the walk-through (you can see a local copy of it here) is written nearly entirely with HTML5, CSS3, and uses Bootstrap.  The only other code involved is the JavaScript I wrote to interact with the Vimeo API.  Most of the code to fix my problem online deals with an outdated version of the Vimeo API that utilized “Frogaloop”.

The Vimeo Videos

The first thing I needed to do was embed each video in it’s own Modal/Tab and ensure that the embedded video would then be responsive. Luckily Bootstrap comes with a great function to make embedded videos responsive:

<div class="embed-responsive embed-responsive-16by9"> # div for responsive embedded video
</div>

Now we just place the iframe with the vimeo video within that div:

<iframe id="ptvVimeo" src="https://player.vimeo.com/video/YourVideoID" width="1280" height="720" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

Creating the JavaScript to stop the vimeo video

With our video in place we can finally begin creating the JavaScript that will stop the Vimeo video when the tab or modal it is in is inactive. The first step is to reference the Vimeo API for our script.

<div class="embed-responsive embed-responsive-16by9">
  <iframe id="ptvVimeo" src="https://player.vimeo.com/video/YourVideoID" width="1280" height="720" frameborder="0"
  webkitallowfullscreen mozallowfullscreen allowfullscreen>
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script> # the Vimeo JavaScript API

Now we just need to create a couple variables to identify which video we’re referencing and the access the actual player for that video. We’ll start by creating a variable that will point to which iframe we want to control. Notice that we gave our iframe an id: id="ptvVimeo". So we’ll create the new variable iframe_ptv and point it to our iframe #ptvVimeo

<script>
  var iframe_ptv = document.querySelector('#ptvVimeo');
</script>

Next we create another variable (player_ptv) that will be able to access the actual Vimeo video player.

<script>
  var iframe_ptv = document.querySelector('#ptvVimeo');
  var player_ptv = new Vimeo.Player(iframe_ptv);
</script>

And now we’ll create the JavaScript function that will stop the video if the Bootstrap Modal becomes hidden. The Bootstrap API is already referenced on our page since we used Bootstrap to design the page, so there’s nothing to source at this point – we can go straight into using the Bootstrap API.

<script>
  var iframe_ptv = document.querySelector('#ptvVimeo');
  var player_ptv = new Vimeo.Player(iframe_ptv);

  $('.modal').on('hidden.bs.modal', function () {
    player_ptv.pause();
  })
</script>

And now to pause the video if the Bootstrap Tab is inactive:

<script>
  var iframe_ptv = document.querySelector('#ptvVimeo');
  var player_ptv = new Vimeo.Player(iframe_ptv);

  $('.modal').on('hidden.bs.modal', function () {
    player_ptv.pause();
  })
  $('a[data-toggle="tab"]').on('hidden.bs.tab', function () {
    player_ptv.pause();
  })
</script>

And we’re done!

Full code to stop Vimeo video JavaScript within Bootstrap Modal/Tab

<!-- Modal Within Page -->
<div class="modal fade" id="ptvSegModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- Tab within Modal -->
        <ul class="nav nav-tabs" role="tablist"> 
          <li role="presentation" class="active"><a href="#ptvExampleSeg" aria-controls="ptvExampleSeg" role="tab" data-toggle="tab">
          PTV Example Video</a></li>
        </ul>
        <!-- Actual Tab Content with Vimeo Video -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade in active" id="ptvExampleSeg">
            <!-- Responsive Bootstrap Embed -->
            <div class="embed-responsive embed-responsive-16by9">
              <iframe id="ptvVimeo" src="https://player.vimeo.com/video/VimeoVideoID" width="1280" height="720" frameborder="0"
              webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
              <!-- Custom JavaScript We Just Created -->
              <script src="https://player.vimeo.com/api/player.js"></script>
              <script>
                var iframe_ptv = document.querySelector('#ptvVimeo');
                var player_ptv = new Vimeo.Player(iframe_ptv);

                $('.modal').on('hidden.bs.modal', function () {
                  player_ptv.pause();
                })
                $('a[data-toggle="tab"]').on('hidden.bs.tab', function () {
                  player_ptv.pause();
                })
              </script>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *