Nato Boram
Nato Boram

Reputation: 4964

Hide embed using CSS

I have a browser compatibility issue with .mp4 (Firefox) and I found a solution, but my problem evolved.

Have this :

<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
<video src="ikitaAnnie.mp4" controls width="800"></video>
<embed type="application/x-vlc-plugin" name="ikitaAnnie" autoplay="no" loop="no" width="800" height="456.8081991" target="ikitaAnnie.mp4" />

And this :

/* Chrome Only */
.chrome embed {
    display: none;
}

/* Firefox Only */
.gecko video {
    display: none;
}

My solution is to hide <video></video> for Firefox, and hide <embed /> for everyone else. The problem is... display: none; doesn't work for <embed />.

Is it possible to hide <embed> using CSS? How?

Upvotes: 0

Views: 953

Answers (1)

Dariusz Sikorski
Dariusz Sikorski

Reputation: 4407

Try to emulate display: none with:

/* Chrome Only */
.chrome embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

Upvotes: 1

Related Questions