JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="container">
   <div class="vc_row vc_row-fluid">
      <div class="wpb_column vc_column_container vc_col-sm-12">
         <div class="vc_column-inner">
            <div class="wpb_wrapper">
               <div class="widget punica-video-list-widget">
                  <h3 class="widget-title visual-title">
                     <span>Video list</span>
                  </h3>
                  <div class="punica-tab-container-4 clearfix">
                     <div class="tabs-container style4">
                        <ul class="nav nav-tabs">
                           <li class="active">
                              <a href="#tab-0" data-toggle="tab">
                                 <span class="media">
                                    <img src="imagens/video1.jpg" alt="">
                                    <span class="fa fa-play"></span>
                                 </span>
                                 <div class="text">
                                    Ministério de Louvor
                                 </div>
...

JavaScript

$(document).ready(function() {
   $(document).on("click","span.icon i.fa-play", function(){
      var vid_src = $(this).closest("div.tab-pane").find("iframe");
      vid_src.attr("src",vid_src.attr("src")+"?autoplay=1");
   });

function vidEmbed(i){
      var vid_src = '<iframe width="560" height="315" src="'+i+'" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>';
      return vid_src;
   }
   
   $( ".punica-tab-container-4" ).tabs({
      activate: function( event, ui ) {
         var vid_data = $(ui.newPanel[0].innerHTML).data("video");
         var vid_src = vidEmbed(vid_data);
         var vid_wrap = $(ui.newPanel[0]);
         vid_wrap.find(".video-wrapper").html(vid_src);
      },
      beforeActivate: function( event, ui ) {
         var vid_wrap = $(ui.oldPanel[0]);
         vid_wrap.find(".video-wrapper").html("");
      },
      create: function( event, ui ) {
         var vid_data = $(ui.panel[0].innerHTML).data("video");
         var vid_src = vidEmbed(vid_data);
         var vid_wrap = $(ui.panel[0]);
         vid_wrap.find(".video-wrapper").html(vid_src);
      }
   });
});