CODEWITHSUNDEEP
youtube-iframe-api
andy3466
andy3466

Reputation: 11

Youtube Iframe API may cause green screen for Samsung android 11 devices

We are using the iframe API in our android app. But we faced a problem that causes some users to experience a green screen (but the audio works well) when playing specific videos.

This problem usually occurs for Samsung android 11 users, but not all the videos can reproduce this issue. The following html code is the sample code from iframe-api-reference. We changed the video id so that we can reproduce this issue for our test device.

<!DOCTYPE html>
<html>
  <body>
    <iframe id="existing-iframe-example"
        width="640" height="360"
        src="https://www.youtube.com/embed/SkcTeTqz6Hg?enablejsapi=1"
        frameborder="0"
        style="border: solid 4px #37474F"
></iframe>

<script type="text/javascript">
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('existing-iframe-example', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
  function onPlayerReady(event) {
    document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
  }
  function changeBorderColor(playerStatus) {
    var color;
    if (playerStatus == -1) {
      color = "#37474F"; // unstarted = gray
    } else if (playerStatus == 0) {
      color = "#FFFF00"; // ended = yellow
    } else if (playerStatus == 1) {
      color = "#33691E"; // playing = green
    } else if (playerStatus == 2) {
      color = "#DD2C00"; // paused = red
    } else if (playerStatus == 3) {
      color = "#AA00FF"; // buffering = purple
    } else if (playerStatus == 5) {
      color = "#FF6DOO"; // video cued = orange
    }
    if (color) {
      document.getElementById('existing-iframe-example').style.borderColor = color;
    }
  }
  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
  }
</script>
  </body>
</html>

green screen image

Upvotes: 1

Views: 435

Answers (1)

Hassan Akhlaq
Hassan Akhlaq

Reputation: 445

your webview is not updated most probably. useful link https://forums.androidcentral.com/ask-question/986749-green-screen-when-playing-videos.html

Upvotes: 1

Related Questions