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。 [Slider Revolution 6]本文将向您展示如何在模块上显示Wistia Video。](https://aladd.net//wp-content/uploads/2020/05/iframe-text-1.png)
3.调整图层的 宽度和高度, 使其与iframe嵌入代码中声明的宽度和高度相匹配。
![[Slider Revolution 6]本文将向您展示如何在模块上显示Wistia Video。 [Slider Revolution 6]本文将向您展示如何在模块上显示Wistia Video。](https://aladd.net//wp-content/uploads/2020/05/width-height-1.png)
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));;
}