Hello everyone,
because of the GDPR (General Data Protection Regulation) I was thinking of writing a macro to embed youtube videos into our Confluence.
I was successful in implementing my feature but I am struggling with the CSS as it does not comply with Confluence formatting (ignoring the section formatting, new lines), especially when I add the macro two times on the same page.
The macro takes the input youtube link and creates a button in front of the thumbnail image, which after pressing creates a youtube-no-cookie iframe embed. (source code below)
(Images below source code) Video used: https://www.youtube.com/watch?v=AwaL2VkVr2o
I am struggling with the CSS of my macro and the CSS of Confluence.
Does anyone have a suggestion?
Cheers, Lukas
Source Code:
## Macro title: Youtube Widget
## Macro has a body: N
## Body processing: Rendered
## Output: XHTML
##
## Developed by: Lukas O
## Date created: December 2021
## @Param Link:title=Youtube Link|type=string|required=true
## @Param Width:title=Pixel Width (Value Only)|type=int|required=false|default=400
## @Param Height:title=Pixel Height (Value Only)|type=int|required=false|default=200
<style>
.container {
position: relative;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
max-width: 400px;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #ffffcc;
color: black;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: #ffffff;
}
</style>
#if ( $paramLink.startsWith("https://www.youtube.com/"))
#set( $parts = $paramLink.split("=") )
#foreach( $part in $parts )
#set( $videoId = $part )
#end
#set( $src="https://www.youtube-nocookie.com/embed/${videoId}" )
#set($src_img="https://img.youtube.com/vi/$videoId/0.jpg")<div class="container">
<button class="btn" id="button">Play: <br></br>
<p>After activation, data may be transmitted to third parties
<a target="_blank" href="https://gdpr-info.eu/">Data protection<span class="sr-only">, opens in a new window</span></a></p>
</button>
<div id="iframeHolder"></div>
<img src=$src_img alt="Italian Trulli">
</div>
#else
Error: Only Youtube Videos are allowed in this macro
#end
<script>
AJS.toInit(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe width=$paramWidth height=$paramHeight src=$src title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; picture-in-picture" allowfullscreen></iframe>');
}
});
$('#button').click(function(){
button.style.display = "none";
});
});
</script>
