禁用点击视频轮播中的播放按钮答案

【问题标题】：Disable clicking on the play button in video carousel禁用点击视频轮播中的播放按钮
【发布时间】：2015-04-09 08:58:12
【问题描述】：

![在此处输入图像描述][1]目前我可以点击轮播中的任何视频，它会出现在 iframe 中，我只是在其中获取视频的 src。我想知道是否有办法停止允许用户在轮播中播放视频，但仅在视频位于 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>

这是我用来更改 IFrame 中的视频的 Jquery 代码。

   $(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>

【问题讨论】：

它只是一个 youtube 视频
您的问题可能需要更多信息。你能设置一个Stack Snippet吗？
我在这里做了一个小提琴：jsfiddle.net/lharby/31muLtex 我可以看到单击猫头鹰缩略图正在更改 youtube 视频的 src 属性。所以那部分正在工作。不幸的是，youtube 被我的工作代理阻止了，所以我可以进行更多测试。
看看这里：developers.google.com/youtube/player_parameters#controls 你能不能为 youtube.com/embed/DU6UV2GPzIk?"></a> 设置 controls=0
我试过了，但视频仍在轮播中播放

标签： jquery owl-carousel

【解决方案1】：

试试这个！

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

jsfiddle 在这里：http://jsfiddle.net/lharby/31muLtex/4/

（我试图禁用 .owl-video-play-icon 上的点击事件，但它不起作用，大概是后来被 youtube js 触发了，这确实意味着可能有另一种解决方案，但这确实会阻止视频在缩略图中播放）。

【讨论】：