lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 850px;
	margin:auto;
}

/* gradient */
/*lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}*/

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
	height:100%;
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width: 100%;
    height: 100%;
    /* …but visually it's still the same size */   
    position: absolute;
    cursor: pointer;
    z-index: 1;    
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}
lite-youtube > .lty-playbtn:before{
	width: 100%;
    height: 100%;background-color: rgb(0 0 0 / 22%);
    /* …but visually it's still the same size */
    /*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>');filter: grayscale(100%);*/
    position: absolute; z-index:1; content:'';
	
}
/*lite-youtube > .lty-playbtn:after{
	width: 100%;
    height: 100%;
    position: absolute;z-index:1; content:'';
	background-color:#000;background-color: rgb(0 0 0 / 29%);
    left: 0;
	
}*/
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    /*clip: rect(0 0 0 0);*/
    /* clip-path: inset(50%); */
    /* height: 1px; */
     overflow: hidden; 
    position: absolute;
     white-space: nowrap;
	 text-overflow: ellipsis;
     width:80%; 
    /* font-size: 16px; */
    color: #fff;
    top: 15px;
    left: 15px;
	text-align:left;
  }
.animation-video {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -32px;
    margin-top: -32px;
	z-index:1;
}
.animation-video:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -20px;
    left: -20px;
    background-color:rgb(255 0 0);
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .8;
    -webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.animation-video:after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    top: -50px;
    left: -50px;
    border: 2px solid rgb(255 0 0);
    background-color: transparent;
    border-radius: 100%;
    opacity: .1;
    -webkit-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
    animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.animation-video span {
    display: inline-block;
    width: 63px;
    height: 63px;
    border-radius: 50%;
    text-align: center;
    line-height: 63px;
    color: #fff;
    background-color:rgb(255 0 0);
}

.animation-video span:before {
    content: "\f04b";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900
}

.animation-img span:before {
    content: "\f06e"
}

@-webkit-keyframes quick-alo-circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg);
        -webkit-opacity: .1
    }

    30% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        -webkit-opacity: .5
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -webkit-opacity: .1
    }
}

@-webkit-keyframes quick-alo-circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }

    100% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}
@media (min-width:224px){
.noidung lite-youtube::after {height:190px;}
}
@media screen and (min-width: 736px){
.noidung lite-youtube::after {height:160px;}
}
@media (min-width:992px){
/*.noidung lite-youtube::after {height:215px;}*/
lite-youtube::after {
	height:inherit;
    padding-bottom: calc(100% / (16 / 9));
}
}