禁用點擊視頻輪播中的播放按鈕

！[1]目前我可以點擊carousal中的任何視頻，它會出現在iframe中，我只是採取src視頻。我想知道是否有辦法停止允許用戶在carousal中播放視頻，但只能在視頻位於iframe內時播放視頻。禁用點擊視頻輪播中的播放按鈕

<div class="row"> 
<div class="main"> 
    <iframe width="600" height="480" id="mainvideo" src="https://www.youtube.com/embed/DU6UV2GPzIk?" style="margin: 30px auto 10px;float: none;display: block;" src="" frameBorder="0" allowfullscreen=""></iframe> 

    <div id="owl-demo" class="owl-carousel"> 

     <div class="article-video red" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/DU6UV2GPzIk?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/2ZfqGr7HbEo?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/053yP1wQR_s?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/B-QIFAy6LPI?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/4_ZRUC0g1ic?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/YU6AU-khKuo?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/Bkz5wyb_6j8?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/f1kx4Bce6nI?"></a></div> 
     <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/1HTq4F_js2g?"></a></div> 

    </div> 
</div>

這是jQuery代碼我使用改變在iframe視頻。

$(document).ready(function(){ 
    $(".article-video").click(function(e) { 
     e.preventDefault(); 
     var href= $(this).find('a').attr('href'); 
     var target = $('.article-video').index($(this)); 
     $("#mainvideo").attr("src", href); 

    }) 
});

$(document).ready(function() { 
 

 
     var owl = $('.owl-carousel'); 
 
     owl.owlCarousel({ 
 
      items:4, 
 
      margin:20, 
 
      loop:true, 
 
      video:true, 
 
      lazyLoad:true, 
 
      dots:false, 
 
      responsive:{ 
 
       0:{ 
 
        items:1 
 
       }, 
 

 
       678:{ 
 
        items:3 
 
       }, 
 
       1000:{ 
 
        items:4 
 
       } 
 
      }, 
 
      nav:true, 
 
      navText: [ 
 
       "<i class='icon-chevron-left icon-white'><</i>", 
 
       "<i class='icon-chevron-right icon-white'>></i>" 
 
      ] 
 

 
     }); 
 
    }); 
 

 
$(document).ready(function(){ 
 
     $(".article-video").click(function(e) { 
 
      e.preventDefault(); 
 
      var href= $(this).find('a').attr('href'); 
 
      var target = $('.article-video').index($(this)); 
 
      $("#mainvideo").attr("src", href); 
 

 
     }) 
 
    });

<link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/assets/css/demo.css"> 
 
    <link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.carousel.css"> 
 
    <link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.theme.css"> 
 

 
<div class="row"> 
 
    <div class="main"> 
 
     <iframe width="600" height="480" id="mainvideo" src="https://www.youtube.com/embed/DU6UV2GPzIk?" style="margin: 30px auto 10px;float: none;display: block;" src="" frameBorder="0" allowfullscreen=""></iframe> 
 

 
     <div id="owl-demo" class="owl-carousel"> 
 

 
      <div class="article-video red" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/DU6UV2GPzIk?controls=0"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/2ZfqGr7HbEo?controls=0"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/053yP1wQR_s?controls=0"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/B-QIFAy6LPI?controls=0"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/4_ZRUC0g1ic?"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/YU6AU-khKuo?"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/Bkz5wyb_6j8?"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/f1kx4Bce6nI?"></a></div> 
 
      <div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/1HTq4F_js2g?"></a></div> 
 

 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="http://www.jackpotjoy.com/promo/responsive_templates/Test/assets/js/jquery-1.11.0.min.js"></script> 
 
<script src="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.carousel.js"></script>

來源

2015-02-09 user1733081

它只是一個YouTube視頻 – user1733081 2015-02-09 15:28:12

您的問題可以使用一些更多的信息。你可以設置一個[Stack Snippet]（http://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers）？ – apaul 2015-02-09 15:42:13

我在這裏做了一個小提琴：http://jsfiddle.net/lharby/31muLtex/我可以看到，點擊貓頭鷹縮略圖正在改變youtube視頻的src屬性。這部分工作。不幸的是，youtube被我的工作代理所阻止，所以我可以再測試一次。 – lharby 2015-02-09 15:47:17

試試這個！

$('.owl-video-play-icon').remove();

的jsfiddle這裏：http://jsfiddle.net/lharby/31muLtex/4/

（我試圖禁用的.owl視頻播放圖標點擊事件，但它沒有工作，想必它是由YouTube的JS後解僱，這確實意味着可能有其他解決方案，但這確實會阻止視頻在縮略圖中播放）。

來源

2015-02-09 19:08:26 lharby

謝謝你的作品。 – user1733081 2015-02-10 10:04:46

禁用點擊視頻輪播中的播放按鈕

回答

相關問題