On my page I am embedding a video from vimeo as so
<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 the css I have
iframe {filter: grayscale(100%)}
This is working in all browsers but not internet exploere 11.
I am aware that since internet exploere 10 they removed the filter property.
I have come across multiple fiddles that are suggested for images and that have hover effects over them.
I am purely looking to add a greyscale filter to my embedded videos without any hover effects and some of the fiddles I found wont work with embedded video.
any help would be greatly appriciated, Thanks
The contrast() function adjusts the contrast of the input image. A value of 0% will create an image that is completely gray.
To embed a video in an HTML page, use the <iframe> element. The source attribute included the video URL. For the dimensions of the video player, set the width and height of the video appropriately. The Video URL is the video embed link.
use this for different browsers
iframe{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
now test in IE11.
if IE 11 doesn't support css filters, you have to use a javascript solution to do the same thing.
cross browser grayscale
That link explains the process in detail, using modernizer to detect browsers and so on. It'd be a lot of work to implement though.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With