JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://player.vimeo.com/api/player.js"></script>

<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 class="text">Text_1</div></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 class="text">Text_2</div></div>

CSS

.video {width:320px;
height:320px;
position:absolute;}

.text {
display:none;
position:fixed;
top:40px;
left:500px;}

#item_1 {top:0px;}
#item_2 {top:350px;}

JavaScript

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