wait to load video module until YT API is ready

cms/static/coffee/spec/main.coffee

@@ -22,7 +22,7 @@ requirejs.config({
         "underscore.string": "xmodule_js/common_static/js/vendor/underscore.string.min",
         "backbone": "xmodule_js/common_static/js/vendor/backbone-min",
         "backbone.associations": "xmodule_js/common_static/js/vendor/backbone-associations-min",
-        "youtube": "xmodule_js/common_static/js/load_youtube",
+        "youtube": "//www.youtube.com/player_api?noext",
         "tinymce": "xmodule_js/common_static/js/vendor/tiny_mce/tiny_mce",
         "jquery.tinymce": "xmodule_js/common_static/js/vendor/tiny_mce/jquery.tinymce",
         "mathjax": "https://edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full",
@@ -102,6 +102,9 @@ requirejs.config({
             deps: ["backbone"],
             exports: "Backbone.Associations"
         },
+        "youtube": {
+            exports: "YT"
+        },
         "codemirror": {
             exports: "CodeMirror"
         },

cms/static/coffee/spec/main_squire.coffee

@@ -22,7 +22,7 @@ requirejs.config({
         "underscore.string": "xmodule_js/common_static/js/vendor/underscore.string.min",
         "backbone": "xmodule_js/common_static/js/vendor/backbone-min",
         "backbone.associations": "xmodule_js/common_static/js/vendor/backbone-associations-min",
-        "youtube": "xmodule_js/common_static/js/load_youtube",
+        "youtube": "//www.youtube.com/player_api?noext",
         "tinymce": "xmodule_js/common_static/js/vendor/tiny_mce/tiny_mce",
         "jquery.tinymce": "xmodule_js/common_static/js/vendor/tiny_mce/jquery.tinymce",
         "mathjax": "https://edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full",
@@ -100,6 +100,9 @@ requirejs.config({
             deps: ["backbone"],
             exports: "Backbone.Associations"
         },
+        "youtube": {
+            exports: "YT"
+        },
         "codemirror": {
             exports: "CodeMirror"
         },

cms/templates/base.html

@@ -61,13 +61,18 @@ var require = {
         "underscore.string": "js/vendor/underscore.string.min",
         "backbone": "js/vendor/backbone-min",
         "backbone.associations": "js/vendor/backbone-associations-min",
-        "youtube": "js/load_youtube",
         "tinymce": "js/vendor/tiny_mce/tiny_mce",
         "jquery.tinymce": "js/vendor/tiny_mce/jquery.tinymce",
-        "mathjax": "https://edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full",
         "xmodule": "/xmodule/xmodule",
         "utility": "js/src/utility",
-        "draggabilly": "js/vendor/draggabilly.pkgd"
+        "draggabilly": "js/vendor/draggabilly.pkgd",
+
+        // externally hosted files
+        "mathjax": "//edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full",
+        // youtube URL does not end in ".js". We add "?noext" to the path so
+        // that require.js adds the ".js" to the query component of the URL,
+        // and leaves the path component intact.
+        "youtube": "//www.youtube.com/player_api?noext"
     },
     shim: {
         "gettext": {
@@ -138,6 +143,9 @@ var require = {
             deps: ["backbone"],
             exports: "Backbone.Associations"
         },
+        "youtube": {
+            exports: "YT"
+        },
         "codemirror": {
             exports: "CodeMirror"
         },

common/lib/xmodule/xmodule/js/src/video/01_initialize.js

@@ -92,23 +92,12 @@ function (VideoPlayer) {
         // Require JS. At the time when we reach this code, the stand alone
         // HTML5 player is already loaded, so no further testing in that case
         // is required.
-        var onPlayerReadyFunc;
-        if (
-            (
-                (state.videoType === 'youtube') &&
-                (window.YT) &&
-                (window.YT.Player)
-            ) ||
-            (state.videoType === 'html5')
-        ) {
-            VideoPlayer(state);
+        if(state.videoType === 'youtube') {
+            YT.ready(function() {
+                VideoPlayer(state);
+            })
         } else {
-            if (state.videoType === 'youtube') {
-                onPlayerReadyFunc = 'onYouTubePlayerAPIReady';
-            } else {
-                onPlayerReadyFunc = 'onHTML5PlayerAPIReady';
-            }
-            window[onPlayerReadyFunc] = _.bind(VideoPlayer, window, state);
+            VideoPlayer(state);
         }
     }
 

common/static/js/load_youtube.js

-define(["jquery"], function($) {
-    var url = "//www.youtube.com/player_api";
-    $("head").append($("<script/>", {src: url}));
-    return window.YT;
-});