Slider Revolution WP
09.26.2016
Wistia Video Example
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”.
|
1 2 3 4 5 6 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 |
.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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/* replace the number in the "revapi" part below with your slider's ID https://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)); } |
