0

In a video gallery (made with Isotope) containing embedded iframe YouTube videos, there is for each one a same custom play icon I created (thanks to this post from Rob W). When I'm clicking on the custom icon, it disappears (basically I'm making it transparent with CSS and JQuery "click" function).

The problem is that when I'm clicking on one of these icons, all the other ones are disappearing too, because the play icon visible in front of these iframe elements are all sharing a same CSS class.

What could I do to make each custom play icons individual, tied to its own Youtube embedded iframe element ?

Here is some code :

My JQuery :

$(document).ready(function(){           
    $('.playbutton').click(function(){

    $('.playbutton').css({
        'background': '#fff0',
        'transition': 'all 1s ease'
    });

    $('.playbutton-triangle').css({
        'border-color': 'transparent #80808000',
        'transition': 'all 1s ease'
    });

});
});

And some HTML showing how my videos are displayed :

<div class="item-nf cate1" id="video1">
   <a href="javascript:void callPlayer(&quot;video1&quot;,&quot;playVideo&quot;)" class="playbutton">
      <div class="playbutton-triangle"></div>
   </a>
    <iframe width="400" height="225" src="https://www.youtube.com/embed/A_YOUTUBE_VIDEO_ID?showinfo=0&rel=0&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<div class="item-nf cate2" id="video2">
etc...

And here is a CodePen showing it concretely.

I thought use the "nth-child()" CSS element, but I don't know if I could use it considering my actual code. There is maybe also easier, like directly use JQuery to make the icon disappear without modifying the CSS, but I think it would be the exact same.

Thanks a lot for reading !

Rojiraan
  • 39
  • 4

1 Answers1

3

You're looking for $(this). Inside of a jQuery event handler (like your click), this will refer to the specific element that triggered the event. †

You can use $(this).find('.playbutton-triangle') to specify that you don't want all .playbutton-triangle elements, but only ones that are a descendant of $(this) (the clicked element).

$('.playbutton').click(function() {

      $(this).css({
        'background': '#fff0',
        'transition': 'all 1s ease'
      });

      $(this).find('.playbutton-triangle').css({
        'border-color': 'transparent #80808000',
        'transition': 'all 1s ease'
      });

});

That said, the example above was left slightly verbose as a learning tool. You're better off storing any repeatedly-referenced elements as a variable instead, like so:

var $this = $(this);

$this.css({ 
    //etc
});

$this.find( ... ).css({
    //etc
});

† To be more precise, it refers to the element to which the event is attached. For example, if you attached a click event on your entire <body> element, and then clicked anything inside of it, the event would fire. But $(this) wouldn't refer to the element you clicked, it would refer to the body, because that is the element to which the event is attached.

Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • 2
    `$(this).find(".question").data("answered",true);` +1 – Louys Patrice Bessette Jul 27 '18 at 04:42
  • Thank you very much for your answer Tyler ! Effectively it's seems so simple now... I really need to read more documentation on jQuery. So if I understand correctly, in my case this is maybe not really important, but if I'm making a jQuery code where I'm calling multiple elements, it's better to have variables to avoid repetition, right ? – Rojiraan Jul 27 '18 at 14:44
  • 1
    Correct, not only to make your life a little easier instead of having to type out the selectors each time, but also because whenever you use a jQuery selector, like `$(".my-class")`, jQuery has to go find that element on the page. If you keep using that selector, jQuery will continue to go and find the element each and every time. Much more efficient to just do it *once* and store it as a variable instead. Last note, general rule of thumb is to name jQuery element variables with a `$` prefix. For example, `var $myClass = $(".my-class")`. – Tyler Roper Jul 27 '18 at 14:46
  • Understood ! I know this is the basics of jQuery, so thanks a lot for taking the time to write this. – Rojiraan Jul 27 '18 at 15:33