bxslider.js pause slider when playing video

HTML

<script src="http://bxslider.com/lib/plugins/jquery.fitvids.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<section id="container">
    <ul class="bxslider">
        <li>
            <div class="text">SLIDE 1</div>
            <div class="slide"><img src="http://dummyimage.com/600x300/000/fff" /></div>
        </li>
        <li>
            <div class="text">SLIDE 2</div>
            <iframe src="http://player.vimeo.com/video/17914974" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </li>
        <li>
            <div class="text">SLIDE 3</div>
            <div class="slide"><img src="http://dummyimage.com/600x300/333/fff" /></div>
        </li>
    </ul>
</section>

CSS

#container {margin:0 auto; width:600px; height:300px; text-align:center; visibility:hidden; padding:0 0 20px 0;}
.text {width:20%; color:#F00; z-index:99999; position:absolute; top:10px; left:0; right:0; text-align:center; padding:10px; border-radius:10px; background-color:rgba(255,255,255,.5); margin:0 auto;}
/* override css*/
.bx-wrapper .bx-viewport {-moz-box-shadow:none !important; -webkit-box-shadow:none !important; box-shadow:none !important; border:none !important;}
.bx-controls-direction a {opacity:0; transition:opacity .25s ease-in-out; -moz-transition:opacity .25s ease-in-out; -webkit-transition:opacity .25s ease-in-out;}
.bx-wrapper:hover .bx-controls-direction a {opacity:1;}

JavaScript

$('.bxslider').bxSlider({
    mode: 'horizontal', //horizontal vertical fade
    speed: 750, //transition duration
    infiniteLoop: true,
    captions: false,
    video: true,
    responsive: true,
    pager: true,
    pagerType: 'full', //full or short
    controls: true,
    auto: true,
    pause: 4000,
    autostart: true,
    autoHover: true,
    autoDelay: 2500,
});