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

[Lukas Ortner]

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>

---

 

---

---

---

[Fabian Lim]

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]

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

[Bill Bailey]

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]

Hi @Bill Bailey 

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

Cheers,

Lukas