Is there a way to change the opacity of a YouTube video when hovering over it, but have it stay solid when clicked to play? The current method doesn't seem to be working for me.
I'm having trouble using jQuery and the click function on the iframe. It's not functioning as expected.
* {
margin: 0px 0 0 0;
}
body {
background: url("https://photos-4.dropbox.com/t/2/AAAzaQaQL59efVSi-nMxk-jzk3dedLDcqaHBtj9zHmBZ2g/12/20139880/jpeg/32x32/1/_/1/2/back.jpg/EJ6Giw8Y9DUgBygH/bwJw1OSYLtn5ScrUolS8x1brd_phrJ_y11sS9ctVrzQ?size_mode=5") fixed;
background-size: cover;
}
#content {
width: 853px;
height: 480PX;
background: #000000;
opacity: 0.8;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}
iframe {
opacity: 0.7;
filter: alpha(opacity=70);
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
iframe:hover {
opacity: 1.0;
filter: alpha(opacity=100);
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
#logo {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
opacity: 0.6;
width: 600px;
height: auto;
}
#logo img {
width: 600px;
height: auto;
}<div id="logo">
<img src="http://s277461962.websitehome.co.uk/codepen/logo.png" />
</div>
<div id="content">
<iframe width="853" height="480" src="https://www.youtube.com/embed/grsCRQaY2CI?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>CodePen: http://codepen.io/Middi/pen/PGbNgg