Question

我将iframe嵌入到响应式div和页面上的文章中。当我单击它所在的位置时，将播放音频，但视频ID为空白。我在文章外部放置了另一个iframe，对此进行了测试，并且该iframe工作正常。这仅在Chrome中发生，并且我确保浏览器已更新。

<article id="content">
    <div id="about" class="divider">
        <h1>Job Title</h1>
        <article class="videos">
            <h2>Videos</h2>
            <div class="video-box">
                <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/YhNzFcp7e2M?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
        </article>
    </div>

    <div class="">
        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/YhNzFcp7e2M?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</article>

<script src="jquery.js"></script>
<script src=jquery-ui.min.js></script>
<script>
    jQuery(document).ready(function(){
        $('#hamburger').click(function(){
            $(this).toggleClass('open');
            $("#nav-bar").toggleClass('open-nav');
        });

        $('#about article').click(function(){
           $(this).toggleClass("open-more", 500); 
        });
    });
</script>

这是CSS：

#about .videos
{
    width: 80%;
    height: 50px; /* the height expands to auto when clicked */
    border-radius: 10px;
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 20px;
    padding-top: 0;
    background: navy;
    overflow: hidden;
    cursor: pointer;
}
.videos .video-box
{
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56%;
}
.video-box iframe
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

这只是为了调整iframe的大小，它是在我添加它之前进行的。

正如我所说，第一个不会出现，但是第二个可以正常工作。

Answer 1

您正在做$(this).toggleClass("open-more", 500);

上面只是将类“ open-more”切换到本文，但是除非您在其他地方有其他CSS，否则它什么也不会做。

您可以尝试以下操作：

jQuery(document).ready(function(){

    $('#about article').click(function(){
    if ($('#about article').height() == 50) {
        $('#about article').css('height','auto');
    }
    else{
        $('#about article').css('height', '50px');
    }
    });

});

点击时，条件将检查您的元素高度是否设置为50px，如果设置为50px，它将更改为auto，否则将其重新设置为50px

这里是Fiddle example

文章中看不到嵌入式YouTube iframe

1 个答案: