Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

Edited

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 Dec 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

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 Community Leader Dec 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!

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
Community showcase
Published in Confluence Cloud

🏠 Say hello to the new Confluence Home!

Hi Atlassian Community, My name is DJ Chung, and I’m a Product Manager on the Confluence Cloud team. Today, I’m excited to share a new and improved version of Home. The new Home helps you ...

37,663 views 27 124
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you