Youtube user macro according to the GDPR (General Data Protection Regulation) - CSS formatting

Lukas Ortner December 13, 2021

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>


1.png 


2.png


3.png


4.png

2 answers

1 vote
Fabian Lim
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
December 30, 2021

Hi @Lukas Ortner

Did you take a look at the ui guidelines here: https://aui.atlassian.com/aui/latest/docs/getting-started.html

Regards

Lukas Ortner January 11, 2022

Hi @Fabian Lim 

thank you for the UI guidelines, I have not come across that. This helped me a a lot fixing my CSS problems

Cheers

0 votes
Bill Bailey
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 30, 2021

When you say struggling, what do you mean exactly?

And I would suggest you pick another class name that "container" as that is pretty common. Set you class name to something more unique like "contaner_youtube". 

Also, the browser inspect function is your friend here, to see if you CSS appears, but is being overwritten by other rules on the page.

And another suggestion, when you have multiple macros that have CSS script, you are loading it mutliple times. My suggestion would be to add your CSS to the space or site CSS file so that it is always present and loads once.

And you end up with an issue of have a repeated ID "iframeHolder". It can cause issues with the page rendering. Just replace it with a class name, and write your CSS accordingly.

And there appears to be no content in that div tag?

<div id="iframeHolder"></div>

Hope this helpd point you in the right direction!

Lukas Ortner January 11, 2022

Hi @Bill Bailey 

thank you for your tip and your time in answering my post. I appreciate any input :)

Cheers,

Lukas

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events