Cross browser built-in grayscale video filter

Question

On my page I embed a video from vimeo as

<h4>Favopurite songs</h4>
<ul>
    <li>
        <a href="https://player.vimeo.com/video/9159308?autoplay=1" target="vimeoPlayer">
            Three little birds
        </a>
    <li>
</ul>

<section id="player">
    <iframe class="first" src="#" name="vimeoPlayer" width="200" height="150"
frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</section>

For css i have

iframe {filter: grayscale(100%)}

This works in all browsers, but not in internet exploere 11.

I know that since using internet exploere 10 they have removed the filter property.

I came across several scripts that are offered for images, and which have freezing effects on them.

I just want to add a grayscale filter to my embedded videos without any freezing effects, and some of the scripts that I found will not work with the embedded video.

any help would be very helpful thanks

Answer 1

iframe{
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
}

IE11.

IE 11 css, javascript-, .

, .. .