iOS engineer who likes clean, simple designs and sans-serif.


Autoplaying Wistia Video in Modal

When a user clicks a link, this code injects the Wistia video into a Modal, opens the Modal and then automatically plays the video. (Requires Foundation Reveal, videos hosted on Wistia and jQuery.)

The Links (HTML):

  <a class="show_preview_video clearfix" data-video_source="" data-video_title="Scott Roen — American Express" data-video_hash="lo3xj0qj3t">Watch Scott’s video ➝</a>

  <a class="show_preview_video clearfix" data-video_source="" data-video_title="Marisa Ricciardi — NYSE Euronext" data-video_hash="5lnydcupe5">Watch Marisa’s video ➝</a>

  <a class="show_preview_video clearfix" data-video_source="" data-video_title="Matt Haradon — New York Times Company" data-video_hash="i6ir4lcyyj">Watch Matt’s video ➝</a>

The Modal (HTML)

  <div id="video-preview-modal" class="reveal-modal large">
      <p class="subhead"></p>
    <div class="wrapper-with-intrinsic-ratio image-wrapper">
      <iframe id="video-preview-iframe" name="wistia_embed" class="flex-video" src="" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <a class="close-reveal-modal icon-x-circle"></a>

The Javascript:

      // Loads Correct Video and Plays It On Click

      // Removes the video when modal is closed (to stop it from playing)
        $("#video-preview-modal .close-reveal-modal").click(function(){

    function showvideo(self){
      // Forces Foundation reveal modal to NOT close on a background click
        "open": replaceVideoSource(self),
        'closeOnBackgroundClick': false
    function replaceVideoSource(self){
      var video_source ='video_source');
      var video_title ='video_title');
      // Inject video source from data attributes
      $('iframe#video-preview-iframe').attr('src', video_source);
      $('#video-preview-modal header h2').html(video_title);
      var wistiaEmbed = $("iframe#video-preview-iframe")[0].wistiaApi;

      // Play the video using the Wistia API;

    function killVideoSource(){
      // Remove the video source to stop the video
      $('iframe#video-preview-iframe').attr('src', '');
  <script src=""></script>

Leave a Comment