CODEWITHSUNDEEP
javascriptjquery
Cagri Ozarpaci
Cagri Ozarpaci

Reputation: 1

JQuery Youtube Embed On Click CSS

I want to change css of an element when onclick iframe so when play to video css will change and when pause video css will return. I know JQuery and i tried to do that but its not worked.

Following Code:

$(".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>

Upvotes: 0

Views: 198

Answers (2)

Alvin Lau
Alvin Lau

Reputation: 194

I think you should create a new class to represent the playing state.

In CSS, you may add:

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

You can use jquery method .hasClass() to see if the class exist in the element. You may try this code:

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

Hope this could help.

Upvotes: 0

Chris Hawkes
Chris Hawkes

Reputation: 12410

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

Upvotes: 1

Related Questions