• James

    (@james-feaver)


    Hi Fabio,

    On pages where I have YouTube videos embedded, I wanted to improve the design when a site visitor has rejected marketing cookies. At the moment, my site shows a big gap, a YouTube icon, a message “This content is blocked because YouTube cookies have not been accepted.” and a small “Accept cookies button” (https://prnt.sc/9p3XcErjdrQ-). Looking carefully, there is a better design but it only appears for a moment before disappearing (https://prnt.sc/ixSd-OCoj8PS). I have removed my child theme style.css to check it is not anything I am doing, plus deactivated all plugins except yours (and WooCommerce and Wordfence) and also swapped to the Twenty Twenty-Five theme and the behaviour is consistent.

    Thanks,

    James

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author fabiodalez

    (@fabiodalez)

    Hi James, must be your lucky day, because I was literally working on this exact thing when your message came in.

    First off, thank you for the report. Stripping the child theme CSS, disabling the other plugins and switching to Twenty Twenty-Five before writing in saved me a lot of guessing and pointed straight at the cause, so I really appreciate it.

    You diagnosed it perfectly: the nicer design you saw flash for a moment was the real placeholder, and then it collapsed into the bare box with the small button. The placeholder’s styling was being shipped inside the same little style block that the consent script removes once the banner finishes loading, so the instant the script ran it took the placeholder’s styling away with it. The card itself was always there, it just lost its look a fraction of a second after the page loaded, which is exactly the flash you noticed.

    I have fixed it so the placeholder keeps its styling for good now, and while I was in there I gave it a proper refresh too: a clean card with the provider’s own play button and brand colour (the YouTube red button, blue for Vimeo, and so on), a clear message and an Accept button. No third party is contacted before consent, so it stays privacy friendly.

    A new version with the fix is going out tomorrow. Once it lands, please update the plugin, hard refresh the page (or clear any caching) and you should see the tidy placeholder staying put. If anything still looks off on your end, just reply here and I will take another look.

    Thanks again for the great report and for using the plugin.

    Best,
    Fabio

    Plugin Author fabiodalez

    (@fabiodalez)

    Hi James,

    The fix is out. I just published version 1.19.2 to ww.wp.xz.cn, and it includes the placeholder fix I mentioned.

    The cause was the one I described: the placeholder’s styling was bundled in the same style block the consent script removes while it loads, so the card showed for a fraction of a second and then collapsed into the bare box. In this version the styling is split into a separate, persistent block that the consent script no longer strips, so the placeholder keeps its look the whole time. On top of that I gave it proper provider branding, so a blocked YouTube embed now shows the YouTube mark in YouTube red, Vimeo in its blue, and so on, instead of a generic grey box.

    Could you update to 1.19.2, clear any page or CDN cache you have in front of the site, then reload a page that has a blocked YouTube embed with marketing cookies rejected, and confirm that the placeholder stays styled and no longer flashes and then collapses. Thanks.

    Let me know how it looks after the update.

    Best,
    Fabio

    Thread Starter James

    (@james-feaver)

    Hi Fabio,

    The update has now landed, thank you for it and all of the detail above. The placeholders are now beautiful and remain on screen until accepted, but I end up with what looks like a lot of space above each one ( https://prnt.sc/W7Lym69hD_6M, https://prnt.sc/ViVSY60klT56). Using the browser dev tools, I can see that your faz-placeholder–video element has the right proportions (for me 900 x 506.25 which is 16:9, but without the cookie enabled, the figure with these classes “wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio” has the right width for me (900px) but is very tall (1090px). With the cookie enabled it is 900 x 558.242.

    Thanks,

    James

    Plugin Author fabiodalez

    (@fabiodalez)

    Hi James, thanks for the screenshots, and for the dev-tools measurements. That second one, the blocked state, shows it perfectly!

    Here is what is happening. When a visitor rejects YouTube cookies, the plugin swaps the video out for the placeholder card. The wrapper that WordPress puts around every embedded video already reserves the full 16 to 9 height for the video itself, and our placeholder was sitting underneath that reserved space instead of filling it. So you ended up with the reserved height, empty, on top, and the placeholder card below it. That empty reservation is the large gap above each card you are seeing, and it is why the figure measured around 1090 pixels tall when the card itself was the correct 506.

    In other words the card was always the right size, it was just being pushed down by the empty space above it.

    I have fixed it so the placeholder fills that reserved space the same way the real video would, so the card sits exactly where the video would sit and the gap disappears. I reproduced your setup, Twenty Twenty-Five with a 16 to 9 YouTube embed and marketing cookies rejected, and confirmed the figure went from roughly double height back to matching the card exactly, with no gap above it.

    It will go out in the next release. I will let you know the moment it is live so you can update and confirm it looks right on your media page. Thanks again for the report.

    Best,
    Fabio

    Thread Starter James

    (@james-feaver)

    Hi Fabio,

    Thank very much for the quick response and looking into the issue. I’ll await the next release.

    Best wishes,

    James

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.