Блог

Я пытаюсь добиться переключения слайдов javascript с помощью видео YouTube, встроенного после текста после нажатия кнопки, но это просто не сработает. Кто-нибудь знает, что я делаю не так?

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

Исправлено путем изменения команды javascript на следующую:

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

Это работает в этом фрагменте кода, который я сделал. Кажется, у вас возникла странная проблема с <p> тегом, обертывающим iframe.

Проверьте это.

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

 .reveal1 {
  display: none;
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<h2> What Is Black Ballad? </h2>
<p> This is some text. </p>
<div 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>
</div>
<div id="more1" align="center" title="View More">
  <button>
    Click me
  </button>
</div>