Question

我想在onclick iframe时更改元素的css，这样当播放到视频css时会发生变化，而暂停视频css将会返回。我知道JQuery，我试图这样做，但它没有用。

以下代码：

$(".video-post").on("click", function() {
    $(".video-post ELEMENT").css("display", "none");
});

HTML：

<div class="post-media video-post embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A5mM6VOVMk4" allowfullscreen></iframe>
    <time datetime="2017">July 21, 2017</time>
</div>

Answer 1

$(".video-post").click(function () {
    $(this).hide();
});

Answer 2

我认为您应该创建一个新类来表示播放状态。

在CSS中，您可以添加：

.video-playing{
  display:none;
}
.video-paused{
  display:inline;
}

您可以使用jquery方法.hasClass（）来查看该类是否存在于该元素中。您可以尝试以下代码：

$(".video-post").click(function(){
  if($(".video-post ELEMENT").hasClass()){
    $(".video-post ELEMENT").removeClass("video-playing").addClass(".video-paused");
  }else{
    $(".video-post ELEMENT").removeClass(".video-paused").addClass("video-playing");
  }
});

希望这可以提供帮助。

JQuery Youtube嵌入点击CSS

2 个答案: