Question

在这种情况下，我该怎么办...

<div id="video-embeds" style="z-index:102;">
<div class="video-embed" style="margin-top: 0px; z-index:102; margin-bottom: 0px;">

<iframe width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

</div>
</div>

...完全隐藏#video-embeds。

CSS还是JQuery？

这是CSS阻止我这样做...

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    margin-bottom: 20px;
}

Answer 1

目前，没有CSS父选择器。您将需要使用Javascript。

由于您使用的是jQuery，因此有一个解决方案：

$('iframe').each(function() {
  if ($(this).attr('src') == '') {
    $(this).parent('.video-embed').hide();
  }
});

Answer 2

您可以通过jQuery处理此问题。将id="frame"添加到框架 <iframe id="frame" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

jQuery(document).ready(function ($) {
   var src = $("$frame").attr('src'); 
   if(src==''){
    $("#video-embeds").css("display: none;");
   }
});

当iframe为空时隐藏div

2 个答案: