March 26, 2022 Flutter

Dart onYouTubeIframeAPIReady

Issue

How can i create function onYouTubeIframeAPIReady from this example
https://developers.google.com/youtube/iframe_api_reference#Getting_Started in Dart?
The API will call this function when the page has finished downloading the JavaScript for the player API.

Solution

Thank you, Günter!
It’s working in in Chrome.

<!DOCTYPE html>
<html>
<body>   
  <div id="player"></div>
  <script type="application/dart" src="ytube_iframe.dart"></script>
  <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
  <script src="packages/browser/dart.js"></script> 
    <script src="packages/browser/interop.js"></script>
</body>
</html>

ytube_iframe.dart

import 'dart:html';
import 'dart:js' as js;
void main() {
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  js.context['onYouTubeIframeAPIReady'] = onYouTubeIframeAPIReady;
  //js.context['onPlayerReady'] = onPlayerReady;
  //js.context['onPlayerStateChange'] = onPlayerStateChange;
}

var player; 
void onYouTubeIframeAPIReady() {
  var params = {
                'height': '390',
                'width': '640',
                'videoId': 'M7lc1UVf-VE',
                /*'events': {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
                }*/
              };
  var jsParams = new js.JsObject.jsify(params);
  player  = new js.JsObject(js.context['YT']['Player'], ['player',jsParams]);
}

Answered By – user3103137

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply Cancel reply