.youtube-container {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
}

.youtube-player {
    display: block;
    margin: 20px auto;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 340px;
    cursor: pointer;
    border-radius: 44px;
}

img.youtube-thumbnail {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    object-fit: cover;
}

div.youtube-play-btn {
    height: 72px;
    width: 100px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("data: image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTkyMCIgem9vbUFuZFBhbj0ibWFnbmlmeSIgdmlld0JveD0iMCAwIDE0NDAgODA5Ljk5OTk5MyIgaGVpZ2h0PSIxMDgwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij48ZGVmcz48Y2xpcFBhdGggaWQ9IjNiNDY2MTc3NTQiPjxwYXRoIGQ9Ik0gMjUyLjUxNTYyNSA4NS41MTU2MjUgTCA3NjUuNDg0Mzc1IDg1LjUxNTYyNSBMIDc2NS40ODQzNzUgNTk4LjQ4NDM3NSBMIDI1Mi41MTU2MjUgNTk4LjQ4NDM3NSBaIE0gMjUyLjUxNTYyNSA4NS41MTU2MjUgIiBjbGlwLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iNDVmN2NjYmZhYiI+PHBhdGggZD0iTSAyOTAuNzY1NjI1IDg1LjUxNTYyNSBMIDcyNy4yMzQzNzUgODUuNTE1NjI1IEMgNzM3LjM3ODkwNiA4NS41MTU2MjUgNzQ3LjEwOTM3NSA4OS41NDI5NjkgNzU0LjI4MTI1IDk2LjcxODc1IEMgNzYxLjQ1NzAzMSAxMDMuODkwNjI1IDc2NS40ODQzNzUgMTEzLjYyMTA5NCA3NjUuNDg0Mzc1IDEyMy43NjU2MjUgTCA3NjUuNDg0Mzc1IDU2MC4yMzQzNzUgQyA3NjUuNDg0Mzc1IDU3MC4zNzg5MDYgNzYxLjQ1NzAzMSA1ODAuMTA5Mzc1IDc1NC4yODEyNSA1ODcuMjgxMjUgQyA3NDcuMTA5Mzc1IDU5NC40NTcwMzEgNzM3LjM3ODkwNiA1OTguNDg0Mzc1IDcyNy4yMzQzNzUgNTk4LjQ4NDM3NSBMIDI5MC43NjU2MjUgNTk4LjQ4NDM3NSBDIDI4MC42MjEwOTQgNTk4LjQ4NDM3NSAyNzAuODkwNjI1IDU5NC40NTcwMzEgMjYzLjcxODc1IDU4Ny4yODEyNSBDIDI1Ni41NDI5NjkgNTgwLjEwOTM3NSAyNTIuNTE1NjI1IDU3MC4zNzg5MDYgMjUyLjUxNTYyNSA1NjAuMjM0Mzc1IEwgMjUyLjUxNTYyNSAxMjMuNzY1NjI1IEMgMjUyLjUxNTYyNSAxMTMuNjIxMDk0IDI1Ni41NDI5NjkgMTAzLjg5MDYyNSAyNjMuNzE4NzUgOTYuNzE4NzUgQyAyNzAuODkwNjI1IDg5LjU0Mjk2OSAyODAuNjIxMDk0IDg1LjUxNTYyNSAyOTAuNzY1NjI1IDg1LjUxNTYyNSBaIE0gMjkwLjc2NTYyNSA4NS41MTU2MjUgIiBjbGlwLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYmFiYzBhMTM2OSI+PHBhdGggZD0iTSAwLjUxNTYyNSAwLjUxNTYyNSBMIDUxMy40ODQzNzUgMC41MTU2MjUgTCA1MTMuNDg0Mzc1IDUxMy40ODQzNzUgTCAwLjUxNTYyNSA1MTMuNDg0Mzc1IFogTSAwLjUxNTYyNSAwLjUxNTYyNSAiIGNsaXAtcnVsZT0ibm9uemVybyI+PC9wYXRoPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSIzZTIxZmZlYjlhIj48cGF0aCBkPSJNIDM4Ljc2NTYyNSAwLjUxNTYyNSBMIDQ3NS4yMzQzNzUgMC41MTU2MjUgQyA0ODUuMzc4OTA2IDAuNTE1NjI1IDQ5NS4xMDkzNzUgNC41NDI5NjkgNTAyLjI4MTI1IDExLjcxODc1IEMgNTA5LjQ1NzAzMSAxOC44OTA2MjUgNTEzLjQ4NDM3NSAyOC42MjEwOTQgNTEzLjQ4NDM3NSAzOC43NjU2MjUgTCA1MTMuNDg0Mzc1IDQ3NS4yMzQzNzUgQyA1MTMuNDg0Mzc1IDQ4NS4zNzg5MDYgNTA5LjQ1NzAzMSA0OTUuMTA5Mzc1IDUwMi4yODEyNSA1MDIuMjgxMjUgQyA0OTUuMTA5Mzc1IDUwOS40NTcwMzEgNDg1LjM3ODkwNiA1MTMuNDg0Mzc1IDQ3NS4yMzQzNzUgNTEzLjQ4NDM3NSBMIDM4Ljc2NTYyNSA1MTMuNDg0Mzc1IEMgMjguNjIxMDk0IDUxMy40ODQzNzUgMTguODkwNjI1IDUwOS40NTcwMzEgMTEuNzE4NzUgNTAyLjI4MTI1IEMgNC41NDI5NjkgNDk1LjEwOTM3NSAwLjUxNTYyNSA0ODUuMzc4OTA2IDAuNTE1NjI1IDQ3NS4yMzQzNzUgTCAwLjUxNTYyNSAzOC43NjU2MjUgQyAwLjUxNTYyNSAyOC42MjEwOTQgNC41NDI5NjkgMTguODkwNjI1IDExLjcxODc1IDExLjcxODc1IEMgMTguODkwNjI1IDQuNTQyOTY5IDI4LjYyMTA5NCAwLjUxNTYyNSAzOC43NjU2MjUgMC41MTU2MjUgWiBNIDM4Ljc2NTYyNSAwLjUxNTYyNSAiIGNsaXAtcnVsZT0ibm9uemVybyI+PC9wYXRoPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSI1ZTQyMTM4OGJiIj48cmVjdCB4PSIwIiB3aWR0aD0iNTE0IiB5PSIwIiBoZWlnaHQ9IjUxNCI+PC9yZWN0PjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJlYzc5OWQ3OTYwIj48cGF0aCBkPSJNIDAuNDc2NTYyIDAuMTIxMDk0IEwgMTAxNi45MjE4NzUgMC4xMjEwOTQgTCAxMDE2LjkyMTg3NSA2ODMuODc4OTA2IEwgMC40NzY1NjIgNjgzLjg3ODkwNiBaIE0gMC40NzY1NjIgMC4xMjEwOTQgIiBjbGlwLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iY2Y1ZGE0Zjg4OSI+PHJlY3QgeD0iMCIgd2lkdGg9IjEwMTgiIHk9IjAiIGhlaWdodD0iNjg0Ij48L3JlY3Q+PC9jbGlwUGF0aD48L2RlZnM+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgMSwgMjExLCA2MykiPjxnIGNsaXAtcGF0aD0idXJsKCNjZjVkYTRmODg5KSI+PGcgY2xpcC1wYXRoPSJ1cmwoIzNiNDY2MTc3NTQpIj48ZyBjbGlwLXBhdGg9InVybCgjNDVmN2NjYmZhYikiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDI1MiwgODUpIj48ZyBjbGlwLXBhdGg9InVybCgjNWU0MjEzODhiYikiPjxnIGNsaXAtcGF0aD0idXJsKCNiYWJjMGExMzY5KSI+PGcgY2xpcC1wYXRoPSJ1cmwoIzNlMjFmZmViOWEpIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNIDAuNTE1NjI1IDAuNTE1NjI1IEwgNTEzLjQ4NDM3NSAwLjUxNTYyNSBMIDUxMy40ODQzNzUgNTEzLjQ4NDM3NSBMIDAuNTE1NjI1IDUxMy40ODQzNzUgWiBNIDAuNTE1NjI1IDAuNTE1NjI1ICIgZmlsbC1vcGFjaXR5PSIxIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD48L2c+PC9nPjwvZz48L2c+PC9nPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjZWM3OTlkNzk2MCkiPjxwYXRoIGZpbGw9IiNmMDBlMDAiIGQ9Ik0gMzU0LjQwNjI1IDE5Ny44MDQ2ODggQyAzNTQuNDA2MjUgMTkxLjE2Nzk2OSAzNTUuMjY1NjI1IDE3OC42NDQ1MzEgMzcxLjE2NDA2MiAxNjkuMzk4NDM4IEMgMzg1LjMzMjAzMSAxNjEuMTU2MjUgNDEzLjc1MzkwNiAxNTQuNjY3OTY5IDQzMS4xNTIzNDQgMTY0LjMzNTkzOCBMIDY4Ni4zNjcxODggMzAzLjE4NzUgQyA2OTkuNDY4NzUgMzEwLjY1NjI1IDcxMy41NDY4NzUgMzI2LjUwNzgxMiA3MTMuMzY3MTg4IDM0My42NTIzNDQgQyA3MTMuMjQ2MDk0IDM1NC44Mzk4NDQgNzA3LjIyMjY1NiAzNjQuNzczNDM4IDY5Ny4xNzE4NzUgMzcwLjIzMDQ2OSBMIDY5Ni41MTk1MzEgMzcwLjYyMTA5NCBMIDQzMC42MzY3MTkgNTAyLjI3NzM0NCBDIDQyNC42NjAxNTYgNTA1LjM2MzI4MSA0MTcuNzM0Mzc1IDUwNi42MTcxODggNDEwLjEwNTQ2OSA1MDYuNjE3MTg4IEMgMzk1LjE1MjM0NCA1MDYuNjI1IDM3OS43OTI5NjkgNTAxLjc3NzM0NCAzNzAuNjAxNTYyIDQ5Ni4yODEyNSBDIDM1NS4xOTUzMTIgNDg3LjA3ODEyNSAzNTQuNDA2MjUgNDc0Ljc4NTE1NiAzNTQuNDA2MjUgNDY4LjI3MzQzOCBaIE0gMjA5LjM2NzE4OCA2ODMuNzI2NTYyIEwgODAzLjMwMDc4MSA2ODMuNzI2NTYyIEMgOTE4Ljg3MTA5NCA2ODMuNzI2NTYyIDEwMTcuNTE1NjI1IDU4My4zNDc2NTYgMTAxNy41MTU2MjUgNDY3Ljc3NzM0NCBMIDEwMTcuNTE1NjI1IDE5MS40MTQwNjIgQyAxMDE3LjUxNTYyNSA3NS44MjgxMjUgOTE4Ljg3MTA5NCAwLjI3MzQzOCA4MDMuMzAwNzgxIDAuMjczNDM4IEwgMjA5LjM2NzE4OCAwLjI3MzQzOCBDIDkzLjgwMDc4MSAwLjI3MzQzOCAwLjQ3NjU2MiA3NS44MjgxMjUgMC40NzY1NjIgMTkxLjQxNDA2MiBMIDAuNDc2NTYyIDQ2Ny43NzczNDQgQyAwLjQ3NjU2MiA1ODMuMzQ3NjU2IDkzLjgwMDc4MSA2ODMuNzI2NTYyIDIwOS4zNjcxODggNjgzLjcyNjU2MiAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+PC9nPjwvZz48L2c+PC9zdmc+") no-repeat center center;
    background-size: cover;
}

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

.youtube-container.youtube-short-format{
    width: 55%;
}

.youtube-container.youtube-short-format .youtube-player {
    padding-bottom: 0;
    min-height: auto;
    height: auto;
    background: transparent;
    border-radius: 32px;
}

.youtube-container.youtube-short-format .youtube-iframe,
.youtube-container.youtube-short-format .youtube-thumbnail {
    position: relative;
    aspect-ratio: 9/16;
    width: 100%;
    height: auto;
    max-height: 704px;
    margin: 0 auto;
    display: block;
}

.youtube-container.youtube-short-format .youtube-play-btn {
    z-index: 2;
}

@media (max-width: 1280px) {
    .youtube-container.youtube-short-format {
        width: 80%;
    }

    .youtube-player {
        border-radius: 24px;
    }
    
}

@media (max-width: 767px) {
    .youtube-container.youtube-short-format {
        width: 100%;
    }

        .youtube-player {
            border-radius: 20px;
        }
}