youtube API - to disable auto fullscreen on mobile

0 votes
247 views
added Sep 17, 2021 in Javascript by lcjr First Warrant Officer (11,830 points)

use 'playsinline': 1 under playerVars

<html> 
  <head>
    <script type="text/javascript">
    // 1. Change the value of this string to your URL
    var clickTag = "https://hormart.com";
    </script>
  </head>
    <body style="margin: 0px;"> 
    <a href="javascript:window.open(window.clickTag)" style="position:relative; display:inline-block;z-index: 2;">
      <div style="position:absolute;height:193px; width:110px; z-index:1;"></div>
      <div style="position:absolute;height:80px; width:100%; z-index:1;"></div>
      <div style="position:absolute;height:193px; width:110px; z-index:1;right:0px;"></div>
      <!-- <div style="position:absolute;bottom: 44px;left: 111px;height: 45px;width:80px;z-index:1;"></div>  -->
      <div id="player"></div>
      <div id="player2"></div>
    </a>
    <script>
      var tag = document.createElement('script');
 
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
      var player, player2;
      
      
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '250',
          width: '300',
          // 2. change to youtube id
          videoId: 'HKM4YDNYwGY', 
                playerVars: {
                  start: 0,
                  // 3. need to change this based on video duration
                  // end: 182,
                  // 2. change to youtube id
                  playlist: 'HKM4YDNYwGY',
                  control: 1,
                  loop: 1, 
                  modestbranding: 1, 
                  fs: 0,
                  rel: '0',
                  iv_load_policy: '3',
                  'playsinline': 1
                },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        
      }
 
      function onPlayerReady(event) {
        event.target.playVideo();
        event.target.mute();
      }
 
      function onPlayerStateChange(event) {
      }
 
    </script> 
  </body> 
</html>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...