Add components

yt-embed/yt-embed.css

@@ -0,0 +1,25 @@
+.yt-embed {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: rgb(173, 173, 173);
+}
+
+.yt-embed-desc {
+    text-align: center;
+}
+
+.yt-embed-button {
+    padding: 20px;
+    margin: 5px;
+    background-color: red;
+    color: white;
+    border-radius: 10px;
+    border: none;
+    text-decoration: none;
+    font-size: 1rem;
+    cursor: pointer;
+}

yt-embed/yt-embed.js

@@ -0,0 +1,22 @@
+let isPrep = false;
+
+
+function YTEmbed ( elementBindID, videoID ) {
+    if ( !isPrep ) {
+        console.log( '[ YT-Embed ] Preparing...' );
+        isPrep = true;
+        const css = document.createElement( 'link' );
+        css.rel = 'stylesheet';
+        css.href = 'https://static.janishutz.com/css/yt-embed.css';
+        // css.href = 'http://localhost:8081/yt-embed.css';
+        document.head.appendChild( css );
+    }
+    const el = document.getElementById( elementBindID );
+    el.innerHTML = `<div class="yt-embed"><p class="yt-embed-desc">YouTube Video was not loaded automatically to preserve your privacy. If you wish to load it here, click the button below!</p>
+    <div><button class="yt-embed-button" onclick="activateYTEmbed( '${ elementBindID }', '${ videoID }' )">Load video</button><a href="https://youtube.com/watch?v=${ videoID }" class="yt-embed-button" target="_blank">View on YouTube</a></div></div>`;
+}
+
+
+function activateYTEmbed ( elementBindID, videoID ) {
+    document.getElementById( elementBindID ).innerHTML = `<iframe width="420" height="315"src="https://www.youtube.com/embed/${ videoID }" class="yt-embed"></iframe>`;
+}