Support » Plugin: YouTube Channel » is it normal that it doesn’t work in AMP pages?

  • Resolved Alessandro

    (@pinoperino)


    Hi,
    I know that I have to post all the info, but maybe this is a very quick question and a very quick reply (like yes/no) is enough.

    I’m looking at an AMP page and the video is not showed. Does it work for you or is an AMP limitation?

    Thank you,
    Alessandro

    • This topic was modified 2 weeks, 1 day ago by Alessandro.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Aleksandar Urošević

    (@urkekg)

    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

    Plugin Author Aleksandar Urošević

    (@urkekg)

    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

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.