Youtube user macro according to the GDPR (General Data Protection Regulation) - CSS formatting
Asked by 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](/t5/user/viewprofilepage/user-id/1345631) Link:title=Youtube Link\|type=string\|required=true  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) Width:title=Pixel Width (Value Only)\|type=int\|required=false\|default=400  
## [@Param](/t5/user/viewprofilepage/user-id/1345631) 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](https://community.atlassian.com/t5/image/serverpage/image-id/173613i119F80D98AF3370F/image-size/large?v=v2&px=999 "1.png")

*** ** * ** ***

![2.png](https://community.atlassian.com/t5/image/serverpage/image-id/173611i0FE092D486844967/image-size/large?v=v2&px=999 "2.png")

*** ** * ** ***

![3.png](https://community.atlassian.com/t5/image/serverpage/image-id/173610i1A055D5974759FE4/image-size/large?v=v2&px=999 "3.png")

*** ** * ** ***

![4.png](https://community.atlassian.com/t5/image/serverpage/image-id/173612iD7FFBC9153CFB75C/image-size/large?v=v2&px=999 "4.png")


Answers:
author: Fabian Lim
body: Hi [@Lukas Ortner](/t5/user/viewprofilepage/user-id/4206335)

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

Regards

comments: author: Lukas Ortner
body: Hi [@Fabian Lim](/t5/user/viewprofilepage/user-id/3131564)

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

Cheers


author: Bill Bailey
body: 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!

comments: author: Lukas Ortner
body: Hi [@Bill Bailey](/t5/user/viewprofilepage/user-id/502089)

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

Cheers,

Lukas


Tags: confluence-server

css

gdpr

multimedia

server

user-macro