Hover Effect On Iframe - wordpress

Question

I am creating a monotone Wordpress blog where images and iframes (Youtube) change from monotone to colour on hover.
http://amitoooldforclubbing.co.uk/
I've had no problem for the images:
img {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
This works fine.
However when I try to do the same for iframes, it doesn't work. Changing it to greyscale does - but the hover effect does not work.
Any idea?
iframe {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
iframe:hover {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
Thanks
James

Answer 1

You simply forgot to set the hover filter grayscale on the iframe back to 0: -webkit-filter: grayscale(0%);. Tested it out on your site and it works now. However you might want to add a class that sets the grayscale to 0 on click as well since you lose the iframe color while the video is playing on hover out. Also, just in case you might not know -webkit-filter is only used by some modern browsers: http://caniuse.com/#feat=css-filters

Answer 2

I would create another empty div inside your iframe, color it grey with opacity and position it absolute top bottom left and right 0, so it's the same size as your iframe. Then, use javascript to change the div on mouseenter and mouseleave to display none, display block respectivly. Yes, it required another DOM element, but it's more widely supported than grayscale()
so something like this:
note: if the div makes the video too hard to see you can do the same thing, with jquery, just replace display: none, and dipslay: block with your greyscale() and axe the extra div tag
HTML
<iframe>
<div>
</div>
</iframe>
CSS
iframe{
position: relative; //this is important so the position absolute references the iframe
}
div{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
Jquery
document.ready(function(){
$('iframe').mouseenter(function(){
$('div').css('display', 'none');
});
$('iframe').mouseleave(function(){
$('div').css('display', 'block');
});
});
here's the documentation for mouseenter and mouseleave