├── MMM-YouTube-API.js
└── README.md


/MMM-YouTube-API.js:
--------------------------------------------------------------------------------
 1 | Module.register("MMM-YouTube-API", {
 2 |     defaults: {
 3 |         videoID: "Sagg08DrO5U",
 4 |         playbackRate: "1",
 5 |         volume: "100",
 6 | 	height: "360",
 7 | 	width: "480",
 8 | 	loop: "true"
 9 |     },
10 | 
11 |     getDom: function(){
12 |         var wrapper = document.createElement('div');
13 | 
14 |         var scriptContainer = document.createElement('script');
15 |         scriptContainer.innerHTML = "function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '" + this.config.height + "', width: '" + this.config.width + "', playerVars: { 'controls': 0, 'showinfo': 0, 'rel': 0, 'iv_load_policy': 3 }, videoId: '" + this.config.videoID + "', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { player.setPlaybackRate(" + this.config.playbackRate + "); player.setVolume(" + this.config.volume + "); event.target.playVideo(); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { done = true; } if (event.data == YT.PlayerState.ENDED && " + this.config.loop + " == true){ player.playVideo(); } } function stopVideo() { player.stopVideo(); }";
16 |         wrapper.appendChild(scriptContainer);
17 | 
18 |         var TempDiv = document.createElement('div');
19 |         wrapper.appendChild(TempDiv);
20 |         TempDiv.setAttribute("id", "player");
21 | 
22 |         var tag = document.createElement('script');
23 |         wrapper.appendChild(tag);
24 |         tag.src = "https://www.youtube.com/iframe_api";
25 | 
26 |         var firstScriptTag = document.getElementsByTagName('script')[0];
27 |         wrapper.appendChild(firstScriptTag);
28 |         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
29 | 
30 | 
31 |         var player;
32 |         var done = false;
33 |         
34 |         return wrapper;
35 |     }
36 | });


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # MMM-YouTube-API
 2 | This a module for the [MagicMirror](https://github.com/MichMich/MagicMirror/tree/develop). It helps you easily implement YouTube videos to be played in your MagicMirror by using YouTube's own iFrame API.
 3 | 
 4 | ## Using the module
 5 | 
 6 | To use this module, add it to the modules array in the `config/config.js` file:
 7 | ````javascript
 8 | modules: [
 9 |     {
10 | 		module: 'MMM-YouTube-API',
11 | 		position: 'top_center',
12 |                 config: {
13 |                     //Config here
14 |                 }
15 |     }
16 | ]
17 | ````
18 | 
19 | |Option|Description|
20 | |---|---|
21 | |`width`|The width of the video.<br><br>**Default value:** `640`<br>|
22 | |`height`|The height of the video.<br><br>**Default value:** `360`<br>|
23 | |`videoID`|The YouTube video ID.<br><br>**Example:**<br>&nbsp;&nbsp;Link: https://www.youtube.com/watch?v=Sagg08DrO5U<br>&nbsp;&nbsp;Id: `Sagg08DrO5U`<br><br>**Default value:** `Sagg08DrO5U`<br>|
24 | |`playbackRate`|The rate at which the video plays.<br><br>**Valid values:** `0.25`, `0.5`, `1`, `1.5`, `2`<br><br>**Default value:** `1`<br>|
25 | |`volume`|The playback volume of the selected video.<br><br>**Valid values:** `0 - 100`<br><br>**Default value:** `100`<br>|
26 | |`loop`|Should the video loop?<br><br>**Valid values:** `true` or `false`<br><br>**Default value:** `true`<br>|
27 | 
28 | <br><br>Made in collaboration with my dear friend **Alfred**
29 | 


--------------------------------------------------------------------------------