How do I remove opacity (hover opacity) when clicked so video will not be transparent

I want to be able to hover over a YouTube video and affect the transparency/opacity (as it is now) but, when I click to play the video, then it turns solid and no longer uses the hover opacity.

I'm not sure how to use jQuery and click function on the iframe. It doesn't seem to work.

* {
  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;
  /* FF4+ */
  -o-transition: all 0.4s ease-out;
  /* Opera 10.5+ */
  -webkit-transition: all 0.4s ease-out;
  /* Saf3.2+, Chrome */
  -ms-transition: all 0.4s ease-out;
  /* IE10? */
  transition: all 0.4s ease-out;
}
iframe:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-transition: all 0.4s ease-out;
  /* FF4+ */
  -o-transition: all 0.4s ease-out;
  /* Opera 10.5+ */
  -webkit-transition: all 0.4s ease-out;
  /* Saf3.2+, Chrome */
  -ms-transition: all 0.4s ease-out;
  /* IE10? */
  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&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Answers


Adding and removing classes is probably a good bet here...

Try this:

iframe.hoverclass {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-transition: all 0.4s ease-out;
    // etc.
}


$("iframe").mouseenter(function () {
    $(this).addClass("hoverclass");
}).click(function () {
    $(this).removeClass("hoverclass");
}).mouseleave(function () {
    $(this).addClass("hoverclass");
});

Need Your Help