javascript - selecting only one div among class via .this not working -

i have 2 vimeo videos , title fades in when play button pressed… works perfect 1 video, if add more same class breaks… tried using .this select 1 somehow doesn't work…

here's fiddle 1 video…

https://jsfiddle.net/4h1xfmrk/8/

and here's fiddle 2 videos…

https://jsfiddle.net/4h1xfmrk/15/

this query code:

var iframe = document.queryselector('iframe'); var player = new vimeo.player(iframe);  player.on('play', function() {     $(".text").fadein( "slow" ); });   player.on('pause', function() {    $(".text").fadeout( "slow" ); });  $( "html" ).click(function() { $( ".text" ).fadeout("slow") }); 

this html:

<div class="video" id="item_1"> <iframe src="https://player.vimeo.com/video/155851922?color=ffffff&title=0&byline=0&portrait=0" width="320" height="320"     frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>        </iframe></div> <div class="text">text_1</div> <div class="video" id="item_2"> <iframe src="https://player.vimeo.com/video/155851922?color=ffffff&title=0&byline=0&portrait=0" width="320" height="320"    frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>    </iframe></div> <div class="text">text_2</div> 

i want if play button #item_1 pressed text_1 shown , if #item_2 pressed text_2 shown…

how need write this?

try fiddle https://jsfiddle.net/4h1xfmrk/21/

$.each($('.video'), function(index, element){         var iframe = $(this).find("iframe");         var player = new vimeo.player(iframe);     player.on('play', function() {             console.log($(this.element).parent().attr('id'));         $(this.element).parent().children('.text').fadein("slow");     });      player.on('pause', function() {        $(this.element).parent().children('.text').fadeout("slow");     }); }); 

you have iterate through video objects , set click handlers individually