// Can also be used with $(document).ready()
$(window).load(function(){
// Wistia handler.
wistiaEmbed = document.getElementById( 'player_1' ).wistiaApi;
// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
$( '.flexslider' )
.fitVids()
.flexslider({
animation: 'slide',
useCSS: false,
animationLoop: false,
smoothHeight: true,
start: function( slider ) {
$('body').removeClass( 'loading' );
},
before: function ( slider ) {
wistiaEmbed.pause();
}
});
wistiaEmbed.bind( 'play', function() {
jQuery( '.flexslider' ).flexslider( 'pause' );
});
wistiaEmbed.bind( 'end', function() {
jQuery( '.flexslider' ).flexslider( 'play' );
});
});
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<iframe id="player_1" src="https://fast.wistia.com/embed/iframe/t4yniozocs?controlsVisibleOnLoad=true&playerColor=474745&version=v1&videoHeight=366&videoWidth=650&volumeControl=true&videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="650" height="366"></iframe>
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
