is it normal that it doesn’t work in AMP pages?

Hey @pinoperino,

HTML content is rendered on AMP page, but YouTube Channel specific CSS does not exists so thumbnails are not rendered visible. If you add following CSS to that page, you’ll see thumbnails (but it’s better to you make AMP load plugin styles):

.youtube_channel .ytc_thumb.ar16_9, .youtube_channel .ytc_thumb.ar16_9>span {
    padding-bottom: 56.26%;
}
.youtube_channel .ytc_thumb>span {
    height: 0;
    width: 100%;
    display: block;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.youtube_channel .ytc_thumb {
    display: block;
    overflow: hidden;
    position: relative;
    height: 0;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
}
.youtube_channel .ytc_thumb>span:before {
    content: " ";
    display: block;
    width: 84px;
    height: 59px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAB2CAMAAABh0UTOAAAAolBMVEVHcEwfHx/MFx4fHx8eHh7MGB7MGB7MGB7MFx4fHx/MGB4fHx8fHx/MFx4eHh4eHh7MGBwfHx8fHx/MFx7MGB4eHh7MGB4fHx8fHx/NGB4fHx8fHx/NFx7MGB4iIiLSISEfHx/MGB7////KysrzyMn79/jRLjPx6ekrKyvfbXF5eXmQkJA6Ojrpl5pfX1/32dra2trtr7GpqanjgIPZUle0tLQYK3k4AAAAIHRSTlMAp2Vl3d267anuzc2Tk7wQEbBAQHp69+ooKPdRUf0EB3oClLYAAAMGSURBVGje1Zhbe9owDIaVmBxIIJxyBExjA4WyrevW7f//tTmBdOXQx3aRLvpdhSS8j2JLsiSA/1qV5XSxYFk2GAwcZ5IkcRz3lPpK81qpuSiaO+pBkkwcR72YZWyxmJblCq41Yk6vvks9h43OkKusXyOoYO/NTGokJW/GjuIaTXFHndSIco7MaY2qaQt1cKGTdkXnuNC6WVWGzKwZ9jZ1W1VgQ3sAZY2uEbZDHZ2K4UMXkOFDGQzwoZk+nvbW0IHeTdd/v1s7qjaVruX2tx02gVgPlZbYGHomUIX9trcIqcIMKuXOGFtA3xRqji1gbg5V2IMJdG4HlfLlYAKt7aAK+6z9iz1UyvUzAVSL/RxUysOXsPQFf00NnMrWT3cHdOffHfZGEUUS+8ZZamuRpUjyKUnmJzmjSE5TknOfpEIhqaVIqj6S+pSgki4B+tjMgqo7IemjSDo+7O+f0HXRJP0+jHp4zHhEOUNp/ArF2IKdT6dW00FyX2xdzaW6ZSinC8ZuDdD6nTPPmx/tDO1thMbYRxO0Rg9VNVsu3TQdDodhGPp+FEWeUqCUCyF4cxE0d9QD31evqBfT1F0uZ1X1cAM4dkOPiwvxqzvq3gdPuBe6F+A0EHeLi8B9b6YvkOSP35gRFlPwqKOGAk88PDJnAhPKZ+iGKrWmjnNcqGhW1UVmChf/649bFWBb6gFUAl1jXIc6aoa/T0IsIcWHujDEh6Z6j3q0hg5Bm/U2vx6tA1UPlVtLrA+RHqr0wwLLI/CMoHJrgfX0UbrpemhTLA/MoQr7akYNIDeHKuyTiaU5cBuolD8NsDkIO6gR1h4q5eYPAVSL/RxUytcvYal2q2h239JPd0Z+ahdRRoGa28T+1jj2jaFbiyxFkk9JMj/JGYV/mqqyj+TcJ6lQSGopkqqPpD7Fr6R5RVDzBwTdSdudkfRR2B0fHxP0pj5+Fy1OXTT42NvU9tEeHjMaU85QGr9CMfZs2tNu19C/K7ZuzKVOy1DNlq57a4AWdM6cn4ZozQjNP47QXPdygvYPcwOhY2Gn+KUAAAAASUVORK5CYII=');
    background-position: top center;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: .9;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 !important;
    margin-left: -42px;
    margin-top: -30px;
    cursor: pointer;
    transform: scale(.85);
}
.youtube_channel .ytc_thumb:hover>span:before {
    background-position: bottom center;
}

Cheers,
Aleksandar

Hello @urkekg,
Thank you for your reply.
Do I just need to copy and paste this css in my wordpress website or in the amp website?
Thank you,
Alessandro

Hi @pinoperino,

The plugin has that on WordPress website, but AMP does not transfer those styles from WP site.

Simply add it to the AMP site and it should work.

Cheers,
Aleksandar

Hello Aleks,
sorry for my late reply.

I finally managed to put the CSS code into the AMP pages (following this instructions https://ampforwp.com/tutorials/article/add-custom-css-in-amp-with-hooks/) and everything is working perfectly.

Thank you again!
Alessandro