How to embed video within a javascript slidetoggle

Question

I'm attempting to achieve a javascript slide toggle with a youtube video embedded after the text once the button is clicked but it just won't work. Does anyone know what I'm doing wrong?

HTML:

<h2> What Is Black Ballad? </h2>
<p> This is some text. </p>
<p class="reveal1">
This is some more text and then an embedded video.
    <div class="video-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/JfHXbPv9cUg" frameborder="0" allowfullscreen></iframe>
    </div>
</p>
<div id="more1" align="center" title="View More">
  <img src="http://www.blackballad.co.uk/wp-content/uploads/2016/10/drop.png" width="20px" height="20px">
</div>

JavaScript:

$(document).ready(function(){
    $("#more1").click(function(){
        $(".reveal1").slideToggle("slow");
    });
});

CSS:

.reveal1 {
    display: none;
}

Answer 1

Fixed it by changing the javascript command to the following:

$(document).ready(function(){
  $("#more1").click(function(){
      $(".reveal1").slideToggle("slow");
      $(".video-container").slideToggle("slow");
  });