[Slider Revolution 6]如何在模块上显示Wistia Video。

[Slider Revolution 6] This article will show you how to display Wistia Video on your module.Slider Revolution
这篇文章约4分阅读完。

1.复制下面的iframe嵌入代码,并替换视频的ID

视频ID位于iframe代码开头的“ src”部分的末尾。在下面的示例中,ID为“ a74mrwu4wi”。

此外,在iframe代码末尾更新“ width”和“ height”值。在下面的示例中,它们是“ 960”和“ 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.将iframe嵌入代码粘贴到  Text / HTML层中

[Slider Revolution 6]本文将向您展示如何在模块上显示Wistia Video。

3.调整图层的  宽度和高度,  使其与iframe嵌入代码中声明的宽度和高度相匹配。

[Slider Revolution 6]本文将向您展示如何在模块上显示Wistia Video。

4.将以下CSS和JavaScript复制并粘贴到滑块的“  自定义CSS / JS”部分

自定义CSS

.is-wistia iframe {

可见性:隐藏;
不透明度:0;
过渡:所有0.3秒的缓解时间!过渡属性:可见性,不透明性!

}

.is-wistia.wistia-ready iframe {可见性:可见;透明度:1}

自定义JS

使用滑块的ID  号在顶部编辑“ revapi”部分  。

/ *
将下面的“ revapi”部分中的数字替换为滑块ID
http://tinyurl.com/zb6hzpc
* /
var api = revapi37;

/ *无需在下面进行编辑* /
var touch =’ontouchend’ 在文档中;

jQuery(’。rev_slider’)。find(’iframe’)。每个(function(){

var $ this = jQuery(this),
src = $ this.attr(’src’);

如果(src.search(’wistia’)!== -1){

$ this = $ this.closest(’。tp-caption’);
$ this.data(’wistia-layer’,$ this.html())。empty()。addClass(’is-wistia’);

}

});

api.on(’revolution.slide.onafterswap’,函数(e,数据){

data.currentslide.find(’。is-wistia’)。每个(onLayers);

})。on(’revolution.slide.onbeforeswap’,function(e,data){

var $ this = data.currentslide.find(’。is-wistia’)。empty()。removeClass(’wistia-ready’);
clearTimeout($ this.data(’wistia-timer’));

});

函数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]);
}

}

函数onLoaded(){

api.revredraw();

var $ this = jQuery(this).closest(’。is-wistia’);
$ this.data(’wistia-timer’,setTimeout(function(){$ this.addClass(’wistia-ready’);},500));;

}

评论

复制标题和 URL