title: Youtube video play & pause depend on visibility of the frame with jquery
body: <p>First I want to say thanks to <a href="https://stackoverflow.com/users/3648578/kosmos">Kosmos</a> for his amazing <a href="https://stackoverflow.com/questions/34375655/youtube-video-play-pause-depend-on-visibility-of-the-frame-with-jquery/34393883#34393883">answer</a>.</p>
  
  <p>How to control youtube video play &amp; pause depend on visibility of the frame or player. Is there any way to do this with youtube embed videos with HTML Tabs? </p>
  
  <p><strong>For example :</strong> </p>
  
  <pre><code>&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;div class="container"&gt;
  
      &lt;ul class="tabs"&gt;
          &lt;li class="tab-link current" data-tab="tab-1"&gt;Tab One&lt;/li&gt;
          &lt;li class="tab-link" data-tab="tab-2"&gt;Tab Two&lt;/li&gt;
          &lt;li class="tab-link" data-tab="tab-3"&gt;Tab Three&lt;/li&gt;
          &lt;li class="tab-link" data-tab="tab-4"&gt;Tab Four&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="tab-1" class="tab-content current"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      &lt;/div&gt;
      &lt;div id="tab-2" class="tab-content"&gt;
           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      &lt;/div&gt;
      &lt;div id="tab-3" class="tab-content"&gt;
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      &lt;/div&gt;
      &lt;div id="tab-4" class="tab-content"&gt;
  &lt;iframe id="playerA" width="300" height="220" src="https://www.youtube.com/embed/0_P4pKbvaII?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- container --&gt;
  </code></pre>
  
  <p>If the above frame visible the video autoplay and if the frame hide or scroll down like <a href="https://jsfiddle.net/rupomkhondaker/1kr637eq/" rel="nofollow noreferrer">DEMO jsfiddle</a> it will auto pause.</p>
  
  <p><strong>JS <a href="https://stackoverflow.com/questions/34375655/youtube-video-play-pause-depend-on-visibility-of-the-frame-with-jquery/34393883#34393883">Answer</a> from <a href="https://stackoverflow.com/users/3648578/kosmos">Kosmos</a> which is <a href="https://jsfiddle.net/kmsdev/gsfkL6xL/" rel="nofollow noreferrer">works great with scroll</a> method (thanks to him) that mean if user scroll away the video pause and if again scroll to video frame in viewport it start playing.
  No My Question is how can implement this with HTML tabs</strong> </p>
  
  <pre><code>var LoadVideo = function(player_id){
      var Program = {
          Init: function(){
              this.NewPlayer();
              this.EventHandler();
          },
  
          NewPlayer: function(){
              var _this = this;
              this.Player = new YT.Player(player_id, {});
              _this.Player.$element = $('#' + player_id);
          },
  
          Play: function(){
              if( this.Player.getPlayerState() === 1 ) return;
              this.Player.playVideo();
          },
  
          Pause: function(){
              if( this.Player.getPlayerState() === 2 ) return;
              this.Player.pauseVideo();
          },
  
          ScrollControl: function(){
              if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
              else this.Pause();
          },
  
          EventHandler: function(){
              var _this = this;
              $(window).on('scroll', function(){
                  _this.ScrollControl();
              });
          }
  
      };
  
      var Utils = {
  
          /** @author https://stackoverflow.com/a/7557433/1684970 */
          IsElementInViewport: function(el){
              if (typeof jQuery === "function" &amp;&amp; el instanceof jQuery) el = el[0];
              var rect = el.getBoundingClientRect();
              return (
                  rect.top &gt;= 0 &amp;&amp;
                  rect.left &gt;= 0 &amp;&amp;
                  rect.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
                  rect.right &lt;= (window.innerWidth || document.documentElement.clientWidth)
              );
          }
  
      };
  
      Program.Init();
  };
  
  window.onload = function(){
      LoadVideo('playerA');
      LoadVideo('playerB');
      LoadVideo('playerC');
  
      // or (loop mode)
  
      //$('iframe').each(function(){
      //  LoadVideo($(this).attr('id'));
      //});
  };
  </code></pre>
  
  <p>Please help or share your idea will be highly appreciate.
  Thanks! </p>