Block YouTube video by default

assets/css/common/global.css

@@ -25,6 +25,10 @@ a {
     color: #72afd2;
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}
+
 /**
  * Sceditor iframe
  */

assets/css/components/posts/ui.css

@@ -63,6 +63,20 @@
 	text-align: center;
 }
 
+.post .post-youtube.post-youtube-placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-around;
+	background-color: #3c8dbc;
+	color: white;
+	border-radius: 5px;
+}
+
+.post .post-youtube.post-youtube-placeholder .title {
+	font-size: 150%;
+}
+
 .post .post-youtube {
 	width: 100%;
 	height: 300px;

assets/js/components/posts/ui.js

@@ -424,17 +424,53 @@ ComunicWeb.components.posts.ui = {
 		//In case of YouTube video
 		else if(info.kind == "youtube"){
 
-			//Create iframe
+			//Create frame placeholder
-			var youtube_iframe = createElem2({
+			var youtube_placeholder = createElem2({
 				appendTo: postRoot,
-				type: "iframe",
+				type: "div",
-				class: "post-youtube",
+				class: "post-youtube post-youtube-placeholder"
-				src: "https://www.youtube-nocookie.com/embed/"+info.file_path+"?rel=0"
+			});
+
+			//Title 
+			createElem2({
+				appendTo: youtube_placeholder,
+				type: "div",
+				class: "title",
+				innerHTML: "<i class='fa fa-youtube-play'></i> YouTube Movie"
+			});
+
+			createElem2({
+				appendTo: youtube_placeholder,
+				type: "a",
+				class: "btn btn-default",
+				innerHTML: "Open on YouTube",
+				href: "https://youtube.com/watch?v=" + info.file_path,
+			}).target = "_blank";
+
+			var openHere = createElem2({
+				appendTo: youtube_placeholder,
+				type: "div",
+				class: "cursor-pointer",
+				innerHTML: "Open here"
+			});
+
+			openHere.addEventListener("click", function(){
+
+				//Create iframe
+				var youtube_iframe = createElem2({
+					insertBefore: youtube_placeholder,
+					type: "iframe",
+					class: "post-youtube",
+					src: "https://www.youtube-nocookie.com/embed/"+info.file_path+"?rel=0"
+				});
+				youtube_iframe.setAttribute("frameborder", 0);
+				youtube_iframe.setAttribute("gesture", "media");
+				youtube_iframe.setAttribute("allow", "encrypted-media");
+				youtube_iframe.setAttribute("allowfullscreen", "");
+
+				youtube_placeholder.remove();
+
 			});
-			youtube_iframe.setAttribute("frameborder", 0);
-			youtube_iframe.setAttribute("gesture", "media");
-			youtube_iframe.setAttribute("allow", "encrypted-media");
-			youtube_iframe.setAttribute("allowfullscreen", "");
 
 		}