Royall Spence's Blog

Internet Explorer Randomly Hides Iframes

Today I noticed Internet Explorer hiding some of my Youtube embeds. On each page load, there was no telling whether the video would appear. Initial investigation showed that the iframe element was still in the document. With some experimentation, I noticed that videos set to autoplay were still outputting audio. Why can’t I see a video that’s playing? Turns out IE was adding a CSS rule to the page, but not on every load:

iframe {
    visibility: hidden;
}

With an understanding of the problem, if not IE’s bizarre behavior, it’s easy to fix. Just add a higher priority selector to enforce iframe visibility:

#container iframe {
    visibility: visible;
}

In my tests, this affected all major IE versions from IE9 to Edge.