JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="video">
<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>

CSS

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

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

JavaScript

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