<div class="hero_image w-screen md:w-full my-4 relative -mx-4 md:mx-0 aspect-video">

    

    
    
        
    

    <style>
    lite-youtube {
        background-color: #000;
        position: relative;
        display: block;
        contain: content;
        background-position: center center;
        background-size: cover;
        cursor: pointer;
        max-width: 100%;
    }

    lite-youtube::after {
        content: "";
        display: block;
        padding-bottom: calc(100% / (16 / 9));
    }

    lite-youtube > iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
    }

    lite-youtube > .lyt-playbtn,
    lite-youtube > .lty-playbtn {
        display: block;
        width: 100%;
        height: 100%;
        background: no-repeat center/68px 48px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
        position: absolute;
        cursor: pointer;
        z-index: 1;
        border: 0;
        filter: none !important;
    }

    lite-youtube.lyt-activated {
        cursor: unset;
    }

    lite-youtube.lyt-activated > .lyt-playbtn,
    lite-youtube.lyt-activated > .lty-playbtn {
        opacity: 0;
        pointer-events: none;
    }
</style>

<lite-youtube videoid=""  class="lg:rounded-lg" style="background-image: url('https://i.ytimg.com/vi//maxresdefault.jpg');">
    <a href="https://youtube.com/watch?v=" class="lyt-playbtn lty-playbtn" title="Play Video">
    </a>
</lite-youtube>


    






    <div class="border-b border-gray-200 flex items-center gap-4 pt-2 pb-2 px-4 lg:px-0">
        <div class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-default">
            
                Rimani aggiornato quotidianamente sui video, approfondimenti e recensioni di HDblog. Iscriviti ora al canale Youtube, basta un Click!
            
        </div>
        <a
            href="https://www.youtube.com/user/HDblog?sub_confirmation=1"
            target="_blank"
            rel="noopener"
            class="inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap bg-[#cc0000] px-3 text-xs font-semibold text-white hover:bg-[#aa0000]"
        >
            <svg class="h-3.5 w-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false" fill="currentColor">
                <path d="M581.7 188.1C575.5 164.4 556.9 145.8 533.4 139.5C490.9 128 320.1 128 320.1 128C320.1 128 149.3 128 106.7 139.5C83.2 145.8 64.7 164.4 58.4 188.1C47 231 47 320.4 47 320.4C47 320.4 47 409.8 58.4 452.7C64.7 476.3 83.2 494.2 106.7 500.5C149.3 512 320.1 512 320.1 512C320.1 512 490.9 512 533.5 500.5C557 494.2 575.5 476.3 581.8 452.7C593.2 409.8 593.2 320.4 593.2 320.4C593.2 320.4 593.2 231 581.8 188.1zM264.2 401.6L264.2 239.2L406.9 320.4L264.2 401.6z" />
            </svg>
            Iscriviti
        </a>
    </div>
</div>



