Does not trigger the video list when I click

Question

I cannot activate youtube video through these codes. When I click on the button fa fa-play gives nothing.

<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>
                              </a>
                           </li>
                           <li>
                              <a href="#tab-1" data-toggle="tab">
                                 <span class="media">
                                    <img src="imagens/090247sou_feliz_com_jesus1.jpg" alt="">
                                    <span class="fa fa-play"></span>
                                 </span>
                                 <div class="text">
                                    Criação Lojas
                                 </div>
                              </a>
                           </li>
                           <li>
                              <a href="#tab-2" data-toggle="tab">
                                 <span class="media">
                                    <img src="imagens/transformados1.jpg" alt="">
                                    <span class="fa fa-play"></span>
                                 </span>
                                 <div class="text">
                                    Ministério de Evangelismo
                                 </div>
                              </a>
                           </li>
                           <li>
                              <a href="#tab-3" data-toggle="tab">
                                 <span class="media">
                                    <img src="imagens/Mensagem-de-boa-noite-para-celular-e-whatsapp-hng1.jpg" alt="">
                                    <span class="fa fa-play"></span>
                                 </span>
                                 <div class="text">
                                    Este site pode ser seu
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                     <!-- end:tabs-container -->
                     <div class="video-wrapper">
                        <div class="tab-content" data-nonce="a2c627c349">
                           <div id="tab-0" class="tab-pane active">
                              <div class="image-video-wrapper" data-video="https://www.youtube.com/embed/JcfJoE68XZU">
                                 <div class="video-wrapper">
                                 </div>
                                 <span class="icon"><i class="fa fa-play"></i></span>
                                 <img src="imagens/video.jpg" alt="">
                              </div>
                           </div>
                           <div id="tab-1" class="tab-pane ">
                              <div class="image-video-wrapper" data-video="https://www.youtube.com/watch?v=8OBfr46Y0cQ">
                                 <span class="icon"><i class="fa fa-play"></i></span>
                                 <img src="imagens/090247sou_feliz_com_jesus.jpg" alt="">
                              </div>
                              <div class="video-wrapper">
                              </div>
                           </div>
                           <div id="tab-2" class="tab-pane ">
                              <div class="image-video-wrapper" data-video="https://www.youtube.com/embed/g7K_2HQ5W">
                                 <span class="icon"><i class="fa fa-play"></i></span>
                                 <img src="imagens/transformados.jpg" alt="">
                              </div>
                              <div class="video-wrapper">
                              </div>
                           </div>
                           <div id="tab-3" class="tab-pane ">
                              <div class="image-video-wrapper" data-video="https://www.youtube.com/embed/GcjtvS9aLrE?">
                                 <span class="icon"><i class="fa fa-play"></i></span>
                                 <img src="imagens/Mensagem-de-boa-noite-para-celular-e-whatsapp-hng.jpg" alt="">
                              </div>
                              <div class="video-wrapper">
                              </div>
                           </div>
                        </div>
                        <!-- end:tab-content -->
                     </div>
                     <!-- end:punica-tab-container-4 -->
                  </div>

Answer 1

Are you using the jQuery UI Tabs. To make this video list work, you need to work with some plugin events.

I created below a script that makes your example functional. Noting that some video Urls in your example are incorrect, such as:

https://www.youtube.com/watch?v=8OBfr46Y0cQ <--- ERRADO
https://www.youtube.com/embed/8OBfr46Y0cQ <--- CORRETO

And also:

https://www.youtube.com/embed/GcjtvS9aLrE? <--- ERRADO ESSE ? NO FINAL
https://www.youtube.com/embed/GcjtvS9aLrE <--- CORRETO

Script:

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

Since the snippet here does not run Youtube videos, the full and functional code is in this Jsfiddle.

Don’t forget to load jQuery UI libraries:

<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>