Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1204320

    I have a youtube video as the background of the first Colour section on the home page, waynebisgrove.com.au
    It plays fine, though slow on the desktop version.
    but displays with a static image and a play button on the mobile version. Obviously the play button can not be clicked as it is in the background.

    Any suggestions to get this video to autoplay on mobile.

    #1204369

    Hi Geoffdyle
    I’m not sure whether thats possible with the integreted background video function in Enfold. You need to add special code. Maybe google is blocked in your location so I just made a quick search and found a description video on YouTube:
    https://www.youtube.com/watch?v=Xc25RykxUrM
    I think you need to make the desktop colour section invisible for mobile and create a code container for mobile devices.
    Edit the code the way you need 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: 'YOUR_VIDEO_ID',
          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>
    #1204803

    Hi Geoffdoyle,

    Autoplay videos are disabled by default on mobile, since autoplay is blocked on Apple devices for example. You can hide the Color Section on mobile and add a regular Video element instead if you like.

    Best regards,
    Rikard

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.