Show different content for blocked external media (like Youtube embed-code)

[elektrischerwalfisch]

I am using klaro for embed-code (Youtube & GoogleMaps iframes). It is working fine, but is there a way to show some different content instead of the empty iframe when the user does not consent? Something like „Media blocked / direkt link to Media“? Is that possible with the callback-funktion in the app?

[DalbertHab]

You can add your "media blocked" information as src that will be overriden if consented.

[elektrischerwalfisch]

Well, that is a simple solution to add some text, but you would not be able to add any links that way. I played around with the callback-function and came up with this solution:

embed-code on website:

<div class="iframe-wrapper">
	<iframe type="text/plain" data-name="externalMedia" data-src="https://www.youtube.com/embed/DoxUiqUpkw4" allowfullscreen=""></iframe>
</div>

config.js:

apps: [
		{
			name: 'externalMedia',
			title: 'External Media',
			purposes: ['externalmedia'],

			callback: function(consent, app) {

				var consentcheck = app.name + consent;
                
				if (consentcheck == "externalMediafalse") {
					$(".iframe-wrapper iframe").each(function() { 
						var extlink = $(this).attr("data-src");
						$(this).parent().addClass("blocked").prepend("<p class='message'><strong>External media blocked</strong><a class='pref' onclick='return klaro.show();'>Change preferences</a><a class='extlink' target='_blank' href='" + extlink + "'>Open on external website</a></p>"); 					
					});
				} else {
					$(".iframe-wrapper iframe").each(function() { 
						$(this).parent().removeClass("blocked").find(".message").remove();  
					});
				} 
			},
		},
]

How about adding that to the example-config? I guess it is a very common requirement.

[robinson2]

@balduin-kowalski Thanks for the callback example, it works great. Would it also be possible to query the language there to be able to display the message accordingly?

[elektrischerwalfisch]

@balduin-kowalski Thanks for the callback example, it works great. Would it also be possible to query the language there to be able to display the message accordingly?

I solved that with simple css

html

<p class=„message“>
<strong>
<span class="deutsch">Externes Video blockiert</span>
<span class="english">External video blocked</span>
</strong>
</p>

css

.deutsch, 
.english {display: none;}

html[lang="de"] .deutsch, 
html[lang="en"] .english {display: block;}

[robinson2]

I just found out how to get to the used language using PHP:

if (klaro.language() == "de") {
	// …
}
else if (klaro.language() == "en") {
	// …
}

[adewes]

Hey everyone, this finally made it into the new release (0.7.6), here's the tutorial:

https://kiprotect.com/docs/klaro/tutorials/contextual_consent

Let me know what you think!

[jmartsch]

I think this issue can be closed then.