Controlling Embedded Youtube Video on MM

  • @zichao92 the access to those functions is limited to the getDom function.

    you should put the definitions outside like

    playthevideo: function() {
    //do the stuff

    and call the function like this.playthevideo()

  • @strawberry-3.141 said in Controlling Embedded Youtube Video on MM:

    playthevideo: function() {
    //do the stuff

    Hi there,

    I tried your recommendation but i got this error Uncaught TypeError: Cannot read property 'playVideo' of null.
    Which is coming from this code:

    playthevideo: function() {
    		var myPlayer = document.getElementById('my-video');

    I suspect that the problem is that the above function is not being recognise as my embedded youtube codes still lies in the getDom function, which has the allowscriptaccess="awalys" that allows the user to control the video. I tried to extract out from the getDom function but i think my syntax is wrong. Here’s the full code of the youtube function that’s in the getDom function.

    		wrapper.innerHTML='<div> <div>  //(youtube link here ) controls=0&showinfo=0&rel=0&autoplay=1" allowscriptaccess="always" name="my-video" frameborder="0" enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash"> allowfullscreen></div></div>';

  • @zichao92 because there is no html element that has the id your looking for so var myPlayer = document.getElementById('my-video'); is null

  • Hi @strawberry-3.141 ,
    Thanks for the clarification!
    I have added id = "my-vdieo" into my code, however, it produced another error :

    Uncaught TypeError: myPlayer.playVideo is not a function
        at Class.playthevideo (youtube.js:69)

    It’s not able to detect the function. After doing some readings about embedded YouTube videos, i came across this site :

    It was mentioned that i require a callback function named onYouTubePlayerReady. The API will call this function when the player is fully loaded and the API is ready to receive calls.

    From there, I should be able to control my video. However, since this function can only be called in getDom function, im not too sure how it should work from here.

  • @zichao92 do you have your code on github?

  • Hi @strawberry-3.141 ,

    I just uploaded to github ( not too sure if i have done it correctly , first time using github) but here you go.

    Edit 1: I’m still using an older version of Remote Control module by Jopyth, it’s more stable on my MagicMirror( less laggy etc). Im not too sure why though

  • @zichao92 I cleaned up your module

        start: function() {
  "Starting module: " +;
        getStyles: function() {
            return ['script.css'];
        sendCommand: function(cmd){
            var myPlayer = document.getElementById('my-video');
                    "event": "command",
                    "func": cmd
                }), "*");
        notificationReceived: function(notification, payload) {
            if (notification === "PAUSE_VIDEO"){
            if (notification === "PLAY_VIDEO"){
        getDom: function() {
            var wrapper = document.createElement("div");
            var background = document.createElement("div");
            var foreground = document.createElement("div");
            var iframe = document.createElement("iframe");
            iframe.setAttribute("id", "my-video");
            iframe.setAttribute("src", "");
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("type", "text/html");
            return wrapper;

  • @strawberry-3.141

    OMG you are life saver. So the whole trick to my module is to use sendcommand instead?

  • @zichao92 not only you had some more issues and sendCommand is a custom method

  • These modules are very interesting.
    Would it be possible to use voice command to manage pause and play of youtube?
    Via notification?
    Thank you