Использование Flexslider для воспроизведения видео Youtube

Я пытаюсь интегрировать воспроизведение видео Youtube в Flexslider. У него есть интеграция Vimeo (которая работает), но Youtube вообще не играет. Как его интегрировать?Использование Flexslider для воспроизведения видео Youtube

// Can also be used with $(document).ready() 
$(window).load(function() { 

    // Vimeo API nonsense 
    var player = document.getElementById('player_1'); 
    $f(player).addEvent('ready', ready); 

    function addEvent(element, eventName, callback) { 
    if (element.addEventListener) { 
     element.addEventListener(eventName, callback, false) 
    } else { 
     element.attachEvent(eventName, callback, false); 
    } 
    } 

    function ready(player_id) { 
    var froogaloop = $f(player_id); 
    froogaloop.addEvent('play', function(data) { 
     $('.flexslider-project').flexslider("pause"); 
    }); 
    froogaloop.addEvent('pause', function(data) { 
     $('.flexslider-project').flexslider("play"); 
    }); 
    } 


    // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved. 
    $(".flexslider-project") 
    .fitVids() 
    .flexslider({ 
     animation: "slide", 
     controlNav: false, 
     directionNav: true, 
     slideshow: true, 
     useCSS: true, 
     prevText: '', 
     nextText: '',  
     video: true, 
     animationLoop: true, 
     smoothHeight: false, 
     before: function(slider){ 
     $f(player).api('pause'); 
     } 
    }); 
});

Это как это выход:

<iframe id="player_1" src="<?php echo the_sub_field('video'); ?>" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

источник

2015-07-08 Rob

Попробуйте это: froogaloop.js и jquery.fitvid.js будет доступен для скачивания Flexslider

<body class="loading"> 

    <div id="container" class="cf">  
    <div id="main" role="main"> 
     <section class="slider"> 
     <div class="flexslider"> 
     <ul class="slides"> 
      <li> 
       <iframe id="player_1" src="http://www.youtube.com/embed/gDsj5UZ_1bA?rel=0&amp;player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
       </li>    
      </ul> 
     </div> 
     </section>  
    </div> 
    </div> 

    <!-- jQuery --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <!-- FlexSlider --> 
    <script defer src="../jquery.flexslider.js"></script> 

    <script type="text/javascript">  
    $(window).load(function(){ 

     // Vimeo API nonsense 
     var player = document.getElementById('player_1'); 
     $f(player).addEvent('ready', ready); 

     function addEvent(element, eventName, callback) { 
     (element.addEventListener) ? element.addEventListener(eventName, callback, false) : element.attachEvent(eventName, callback, false); 
     } 

     function ready(player_id) { 
     var froogaloop = $f(player_id); 

     froogaloop.addEvent('play', function(data) { 
      $('.flexslider').flexslider("pause"); 
     }); 

     froogaloop.addEvent('pause', function(data) { 
      $('.flexslider').flexslider("play"); 
     }); 
     } 


     // 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){ 
      $f(player).api('pause'); 
      } 
     }); 
    }); 
    </script> 
    <!-- Optional FlexSlider Additions --> 
    <script src="js/froogaloop.js"></script> 
    <script src="js/jquery.fitvid.js"></script> 

</body>

источник

2015-07-15 05:47:04

Это была по существу работа подключив эти два JS-файла, он затем работал. – Rob

Использование Flexslider для воспроизведения видео Youtube

ответ

Смежные вопросы