jQuery Klasse hinzufügen bei Klick funktioniert nicht

Question

Wahrscheinlich eine einfache Lösung. Ich würde gerne ein eingebettetes Video unter dem "Watch the video" beim Klick auf ein Video erweitern. Ziemlich geradlinig, aber ich kann diesen Code nicht erhalten, um die "erweiterte" Klasse hinzuzufügen, wenn ich auf das video__player div für das Leben von mir klicke. Jede Hilfe hier wird sehr geschätzt, danke.

Code:

$(".video").click(function() { 
 
    $(".video__player").addClass("expanded"); 
 
});

.video__player { 
 
    display: none; 
 
    width: 80vw; 
 
    max-width: 560px; 
 
    max-height: 315px; 
 
    height: 0; 
 
    transition: 0.5s; 
 
    margin: auto; 
 
} 
 

 
iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.expanded { 
 
    height: 45vw !important; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="video__container animated fadeInDownShort slow"> 
 
    <a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a> 
 
</div> 
 
<div class="video__player"> 
 
    <br><br> 
 
    <iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe> 
 
</div>

Answer 1

One, wie der Kommentar sagt, können Sie es nicht in einem $ (document) .ready (() Funktion {}) gewickelt haben; Handler. Zweitens, Ihr allowFullScreen hat keinen Wert festgelegt. Nicht festgelegt, der Standardwert ist false. Wenn Sie es im Vollbildmodus zulassen möchten, legen Sie es auf true fest. Das Senden Ihres vollständigen Codes über eine JSFiddle oder eine repl.it würde auch helfen, da es etwas anderes sein könnte.

Im Stackoverflow-Interpreter scheint Ihr Code gut zu funktionieren. Vielleicht ist es etwas mit jedem Dolmetscher, den Sie verwenden?