[Resolved] video shows huge padding when cookies are not accepted

[Author]

Posts

[heinrichT]

I am trying to: create a layout for posts with a youtube video from dynamic source and see a huge padding when the cookies are not accepted. I chatted with Waqar today and he told me to use a css (div.tb-youtube > div { padding-top: 0 !important;}) with a conditional shortcode that i could get from borlabs cookie support, but they now answered that, this is not possible and will never be possible on their side.
if i insert the css the video is in the correct position but if the cookies are accepted the video is gone. can you probably provide me a css that will let the video show if the cookies are accepted, for that purpose borlabes cookie provid a shortcode 😉

[borlabs-cookie type="external-media"]
// this content will show only if cookie for the "external-media" group has been accepted
[/borlabs-cookie]

Link to a page where the issue can be seen: hidden link

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

During further troubleshooting, I was able to override the top padding (when the cookie is not accepted), using the following script:
( screenshot: hidden link )

jQuery(document).ready(function() {
	jQuery('div.tb-youtube div.BorlabsCookie').parent().css("padding-top", "0");
});

regards,
Waqar

[heinrichT]

Hi Waqar,
yes it works but it takes about 3 sec. for the video to change position... thats only when der cookies are not accepted.
the Video disappears when you want to watch it. if you reload the side, the cookies are accepted and the video is starting...

[Waqar]

Thanks for the update and glad that it works.

The custom code can be slightly updated to fix both these issues:

jQuery(document).ready(function() {
	jQuery('div.tb-youtube div.BorlabsCookie').parent().css("padding-top", "0");

	jQuery('div.tb-youtube div.BorlabsCookie').click(function() {
		jQuery(this).parent().css("padding-top", "");
	});
});

[heinrichT]

hi waqar,

leider arbeitet dieser code nicht wie erwartet, wenn die cookies nicht akzeptiert werden, wird nun gar kein frame mehr angezeigt.

nur zur sicherheit die frage: diese code ist css oder gehört er als snippet eingebunden?

[heinrichT]

unfortunately this code does not work as expected, if the cookies are not accepted, no frame will be displayed.

just to be on the safe side the question: this code is css or does it belong to css as snippet?

[Waqar]

If you'll go to the edit screen of your content template "Vorlage für Beiträge", you'll find the following custom script, in the "JS editor" field.
( screenshot: hidden link )

jQuery(document).ready(function() {

	setTimeout(function() {
		jQuery('div.tb-youtube div.BorlabsCookie').parent().css("padding-top", "0");
	}, 500);
	

	jQuery('div.tb-youtube div.BorlabsCookie').click(function() {
		jQuery(this).parent().css("padding-top", "");
	});

});

Please clear all involved caches and then check this page again, with and without accepting the cookie, and video will load and show correctly.

Note: There will be an almost unnoticeable delay while the video changes position when the cookie hasn't been accepted and it is unavoidable.

For even more ideas and suggestions related to custom scripts, you can consider posting at specialized forums like "Stack Overflow"
( https://stackoverflow.com/ ).

[heinrichT]

My issue is resolved now. Thank you!