*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body{
margin:0px;
padding:0px;
}
.ymbox-mp4 {
display:none;
position: relative;
max-width: 100%;
min-width:360px;
background-color:transparent;
margin: 0 auto;
padding:0;
resize: horizontal; /* 가로 크기 조절 */
overflow: hidden;
border: none;
border-radius: 10px;
box-shadow: 0 0 0 5px #fff, 0px 0px 15px rgba(0,0,0,0.3);
width:40vw;}
.ymbox-mp4 .size-ref{
visibility: hidden; /* 안 보이지만 크기는 유지 */
display: block;
width: 100%;
height: auto;
padding:0px;
margin:0px;
}
.yareau-mp4 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding:0px;
margin:0px;
}
.yvideo-mp4 {
position: absolute;
top: 50%; left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
}

.ymbox{
display:none;
position: relative;
overflow:hidden;
background-color:transparent;
max-width: 100%;
padding:0px;
margin:0px auto;
border: none;
border-radius: 10px;
box-shadow: 0 0 0 5px #fff, 0px 0px 15px rgba(0,0,0,0.3);
resize: horizontal; /* 가로 크기 조절 */
width:40vw;min-width:360px;}
.yareau{
position: relative;
width: 100%;
padding-bottom: 177.78%;margin:0px;
}
.yvideo{
position: absolute;
width: 100%;
height: 100%;
}
/* 핸들이 있는 모서리에 눈에 띄는 가상 요소 추가 */
.ymbox-mp4::after,
.ymbox::after {
content: "";
position: absolute;
right: 2px;
bottom: 2px;
width: 12px;
height: 12px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M0,12 L12,0 M4,12 L12,4 M8,12 L12,8' stroke='%23000000' stroke-width='3'/><path d='M0,12 L12,0 M4,12 L12,4 M8,12 L12,8' stroke='%23FFFFFF' stroke-width='1.2'/></svg>") no-repeat center;
pointer-events: none; /* 클릭 방해 안 함 */
}
#player{
position: absolute;
overflow:hidden;
padding:0px;
margin:0px;
width: 100%;
height: 100%;
}
.poster-icon{
position: absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100px !important;
height: 100px !important;
}
.youtube-m{
position: fixed;
top: 50% !important;
left: 50% !important;
transform: translate(-50%,-50%) !important;
overflow:hidden;
padding:0px;
margin:0px;
height:100%;
width:100%;
}
.poster-icon_end{
display: block !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px !important;
height: 70px !important;
}
/*#youtube-plugin-cc, #youtubeQuality{
display: none;
}
*/
@media (max-width: 480px) {
.player-poster {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.poster-icon{
position: absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100px !important;
height: 100px !important;
}
}
/* 유튜브 자막을 화면 밖으로 보내는 CSS */
.ytp-caption-window-bottom {
position: absolute !important;
top: -9999px !important; /* 자막을 화면 밖으로 보냅니다 */
left: -9999px !important;
}
.player-poster {
background-size: auto 100% !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}video{
object-fit: contain;
}