Embed Youtube video on WordPress Website with AutoPlay in mobile

Autoplay YouTube Video In Mobile Live Practice

Hello friends, In this article, you will know, How to AutoPlay YouTube Video in Mobile (Android & IOS) & How to Increase YouTube Videos Views in Hindi.

Here is the simple code to post on your website where you want to add your youTube video. If you have confused to complete this work.

Below I have shared a detailed video that how to do this work. After this code, you will get a video to watch it.

<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div class="iframe-container">
  <div id="player"></div>
</div>
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '100%',
      videoId: 'qIjxPxh78aU',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>

<style>
/* Make the youtube video responsive */
  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

Autoplay YouTube Video in Mobile Live Practice.

Below is an example of my work

Useful Tools & Website for Bloggers:-

Leave a Reply

Scroll to Top