JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<div id="player1" data-bind="player: { id: Id, height: '250', width: '444' }">
</div><div id="player2" data-bind="player: { id: Id, height: '500', width: '888' }"></div>

JavaScript

ko.bindingHandlers['player'] = {
        init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            // Check if global script and function is declared.
            if ( !document.getElementById('playerScript') ) {
                // Create script
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var playerDiv = document.getElementById('player');
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                // Create global function that their API calls back
                window.playerReady = ko.observable(false);
                window.onYouTubeIframeAPIReady = function() {
                    window.playerReady(true);
                };
            }
        },
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

            var value = valueAccessor(),
                id = value.id(),
                height = ko.unwrap(value.height) || '250',
                width = ko.unwrap(value.width) || '444'
            ;

            if ( !value.id()) {
                return;
            }

            if ( !window.playerReady() ) {
                // YT hasn't invoked global callback.  Subscribe to update
                var subscription;
                subscription = window.playerReady.subscribe( function(newValue) {
                     if ( newValue ) {
                         subscription.dispose();
                         // Just get this binding to fire again
                         value.id.notifySubscribers(value.id());
                     }
                });
            } else {

                var player = new YT.Player( element, {
                    height: height,
                    width: width,
                    videoId: id 
                });
            }
        },
 ...