当 iframe 为空时隐藏 div

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

Hide div when iframe is empty

html

iframe

hide