Comment supprimer une opacité (opacité de survol) lorsque je clique pour que la vidéo ne soit pas transparente

Question

Je souhaite pouvoir passer la souris sur une vidéo YouTube et affecter la transparence/l'opacité (comme c'est le cas actuellement), mais lorsque je clique dessus la vidéo, puis elle devient solide et n'utilise plus l'opacité du survol.

Je ne sais pas comment utiliser jQuery et la fonction click sur le iframe. Cela ne semble pas fonctionner.

* { 
 
    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>

CodePen: http://codepen.io/Middi/pen/PGbNgg

Answer 1

Ajout et suppression de classes est probablement un bon pari ici ...

Essayez ceci:

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"); 
});