Как удалить непрозрачность (непрозрачность наведения) при нажатии, так что видео не будет прозрачным

Question

Я хочу, чтобы навести курсор на видео YouTube и повлиять на прозрачность/непрозрачность (как сейчас), но когда я нажимаю, чтобы играть видео, затем он становится твердым и больше не использует непрозрачность наведения.

Я не уверен, как использовать jQuery и click функцию на iframe. Кажется, это не работает.

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

Добавление и удаление классов, вероятно, хорошая ставка здесь ...

Попробуйте это:

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