pg-video{display:block;position:relative;--transition-timing-function: cubic-bezier(.45, 0, 0, 1);--play-y: 0;--pause-y: 2rem;--volume-off-y: 0;--volume-y: 2rem}pg-video video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}pg-video[not-autoplay=true] video{cursor:pointer}pg-video[data-playing=true]{--play-y: -2rem;--pause-y: 0}pg-video[data-volume=true]{--volume-off-y: -2rem;--volume-y: 0}.my-video-controls{display:flex;position:absolute;right:1rem;bottom:1rem;z-index:1}.my-video-controls>*+*{margin-left:1rem}.my-video__btn{position:relative;transition:background-color .4s var(--transition-timing-function);cursor:pointer;border-radius:100%;background-color:#fff;width:32px;height:32px;overflow:hidden;font-size:16px}.my-video__btn:before,.my-video__btn:after{content:"";position:absolute;top:50%;left:50%;transition:all .4s var(--transition-timing-function);margin-top:-8px;margin-left:-10px;width:20px;height:16px;font-size:16px;background-repeat:no-repeat}@media (hover: hover){.my-video__btn:hover{background-color:#000;color:#f1f1f1}}.my-video__btn.my-video__btn--play:before,.my-video__btn.my-video__btn--play:after{margin-left:-5px}.my-video__btn.my-video__btn--play:before{transform:translateY(var(--play-y));background-image:url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">        <path fill="black" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/>      </svg>')}@media (hover: hover){.my-video__btn.my-video__btn--play:before{content:"";background-image:none}}.my-video__btn.my-video__btn--play:after{transform:translateY(var(--pause-y));background-image:url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">        <path fill="black" d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/>      </svg>')}@media (hover: hover){.my-video__btn.my-video__btn--play:after{content:"";background-image:none}}.my-video__btn.my-video__btn--volume:before{transform:translateY(var(--volume-off-y));background-image:url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">        <path fill="black" d="M301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/>      </svg>')}@media (hover: hover){.my-video__btn.my-video__btn--volume:before{content:"";background-image:none}}.my-video__btn.my-video__btn--volume:after{transform:translateY(var(--volume-y));background-image:url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">        <path fill="black" d="M333.1 34.8C344.6 40 352 51.4 352 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L163.8 352 96 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L298.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zm172 72.2c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C507.3 341.3 528 301.1 528 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C466.1 199.1 480 225.9 480 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C425.1 284.4 432 271 432 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5z"/>      </svg>')}@media (hover: hover){.my-video__btn.my-video__btn--volume:after{content:"";background-image:none}}