Saturday, 6 February 2021

Open iframe of youtube video in webview in full screen programatically - iOS

I want to simulate clicking on the full screen button in programmatic manner, like a method to call.

There is a similar question and both solutions especially this with javascript code doesn't work.

I use youtube-ios-player-helper which embeds a youtube in webview.

The code of video player in web view:

<html><head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
    body { margin: 0; width:100%; height:100%;  background-color:#000000; }
    html { width:100%; height:100%; background-color:#000000; }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    </style>
</head>
<body>
    <div class="embed-container">
        <iframe id="player" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="375" height="211" src="https://www.youtube.com/embed/h-UKzttJbes?modestbranding=1&amp;origin=http%3A%2F%app-name&amp;autoplay=0&amp;playsinline=1&amp;controls=1&amp;enablejsapi=1&amp;widgetid=1"></iframe>
    </div>
    <script type="text/javascript" id="www-widgetapi-script" src="https://www.youtube.com/s/player/bfb74eaf/www-widgetapi.vflset/www-widgetapi.js" async=""></script><script src="https://www.youtube.com/iframe_api" onerror="window.location.href='ytplayer://onYouTubeIframeAPIFailedToLoad'"></script>
    <script>
    var player;
    var error = false;

    YT.ready(function() {
        player = new YT.Player('player', {
  "width" : "100%",
  "events" : {
    "onPlaybackQualityChange" : "onPlaybackQualityChange",
    "onReady" : "onReady",
    "onError" : "onPlayerError",
    "onStateChange" : "onStateChange"
  },
  "videoId" : "h-UKzttJbes",
  "height" : "100%",
  "playerVars" : {
    "modestbranding" : 1,
    "origin" : "app-name",
    "autoplay" : 0,
    "playsinline" : 1,
    "controls" : 1
  }
});
        player.setSize(window.innerWidth, window.innerHeight);
        window.location.href = 'ytplayer://onYouTubeIframeAPIReady';

        // this will transmit playTime frequently while playng
        function getCurrentTime() {
             var state = player.getPlayerState();
             if (state == YT.PlayerState.PLAYING) {
                 time = player.getCurrentTime()
                 window.location.href = 'ytplayer://onPlayTime?data=' + time;
             }
        }
        
        window.setInterval(getCurrentTime, 500);
             
    });

    function onReady(event) {
        window.location.href = 'ytplayer://onReady?data=' + event.data;
    }

    function onStateChange(event) {
        if (!error) {            
            window.location.href = 'ytplayer://onStateChange?data=' + event.data;
        }
        else {
            error = false;
        }
    }

    function onPlaybackQualityChange(event) {
        window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
    }

    function onPlayerError(event) {
        if (event.data == 100) {
            error = true;
        }
        window.location.href = 'ytplayer://onError?data=' + event.data;
    }
    
    window.onresize = function() {
        player.setSize(window.innerWidth, window.innerHeight);
    }
    </script>


</body></html>


from Open iframe of youtube video in webview in full screen programatically - iOS

No comments:

Post a Comment