diff --git a/assets/css/common/global.css b/assets/css/common/global.css index b14618ba..4a1a0fcd 100644 --- a/assets/css/common/global.css +++ b/assets/css/common/global.css @@ -25,6 +25,10 @@ a { color: #72afd2; } +.cursor-pointer { + cursor: pointer; +} + /** * Sceditor iframe */ diff --git a/assets/css/components/posts/ui.css b/assets/css/components/posts/ui.css index 93f936dd..0c00c437 100644 --- a/assets/css/components/posts/ui.css +++ b/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; diff --git a/assets/js/components/posts/ui.js b/assets/js/components/posts/ui.js index f0fa71e3..50842e12 100644 --- a/assets/js/components/posts/ui.js +++ b/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 - var youtube_iframe = createElem2({ + //Create frame placeholder + var youtube_placeholder = createElem2({ appendTo: postRoot, - type: "iframe", - class: "post-youtube", - src: "https://www.youtube-nocookie.com/embed/"+info.file_path+"?rel=0" + type: "div", + class: "post-youtube post-youtube-placeholder" + }); + + //Title + createElem2({ + appendTo: youtube_placeholder, + type: "div", + class: "title", + innerHTML: " 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", ""); }