Hide div when iframe is empty

Question

How do I, in this case...

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

...hide #video-embeds completely.

CSS or JQuery?

This is css that prevents me doing it...

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

Answer 1

For now, there is no CSS parent selector. You will need to do it using Javascript.

Since you are using jQuery, here is a solution:

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