The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

This article will show you how to display Wistia Video on your module.

1. Copy the iframe embed code below, and replace the video's ID

The video’s ID is placed at the very end of the “src” part toward the beginning of the iframe code.  In the example below, the ID is “a74mrwu4wi”.

In addition, update the “width” and “height” values toward the end of the iframe code.  In the example below, these are “960” and “540”.

<iframe src="//fast.wistia.net/embed/iframe/a74mrwu4wi"
allowtransparency="false" frameborder="0" scrolling="no" class="wistia_embed"
name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen
oallowfullscreen msallowfullscreen width="960" height="540"></iframe>

2. Paste the iframe embed code into a Text/HTML Layer

3. Adjust the width and height for the Layer to match the same width and height declared in the iframe embed code.

4. Copy and paste the following CSS and JavaScript into your slider's Custom CSS/JS section

Custom CSS

.is-wistia iframe {
 
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out !important; transition-property: visibility, opacity !important;
 
}
 
.is-wistia.wistia-ready iframe {visibility: visible; opacity: 1}

Custom JS

Edit the “revapi” part toward the top with your slider’s ID number.

/*
   replace the number in the "revapi" part below with your slider's ID
   http://tinyurl.com/zb6hzpc
*/
var api = revapi37;
 
/* no need to edit below */
var touch = 'ontouchend' in document;
 
jQuery('.rev_slider').find('iframe').each(function() {
 
    var $this = jQuery(this),
        src = $this.attr('src');
 
    if(src.search('wistia') !== -1) {
 
        $this = $this.closest('.tp-caption');
        $this.data('wistia-layer', $this.html()).empty().addClass('is-wistia');
 
    }
 
});
 
api.on('revolution.slide.onafterswap', function (e, data) {
 
    data.currentslide.find('.is-wistia').each(onLayers);
 
}).on('revolution.slide.onbeforeswap', function(e, data) {
 
    var $this = data.currentslide.find('.is-wistia').empty().removeClass('wistia-ready');
    clearTimeout($this.data('wistia-timer'));    
 
});
 
function onLayers() {
 
    var $this = jQuery(this),
        frame = jQuery($this.data('wistia-layer'));
 
    if(!touch) {
        frame.one('load', onLoaded).appendTo($this);
    }
    else {
        frame.appendTo($this);
        onLoaded.call(frame[0]);
    }  
 
}
 
function onLoaded() {
 
    api.revredraw();
 
    var $this = jQuery(this).closest('.is-wistia');
    $this.data('wistia-timer', setTimeout(function() {$this.addClass('wistia-ready');}, 500));
 
}

Popular Solutions