.vidcontainer{ position: fixed; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; overflow: hidden; display: none; background-color: rgba(0,0,0,0.7); cursor: pointer; z-index: 999; } .vidcontainer .closevid{ width: 40px; height: 40px; background: url(../img/close.png) no-repeat center/100% auto; position: absolute; top: 40px; right: 40px; cursor: pointer; } .vidcontainer video{ position: absolute; width: 100%; max-height: 100%; top: 0; left: 0; background-color: #000; bottom: 0; right: 0; margin: auto; } /*video*/ .video-fixed .cha{ width: 40px; height: 40px; background: url(../img/jpg/close.png) no-repeat center; background-size: 100%; position: absolute; right: 5px; top: 5px; } .video-fixed{ position: fixed; width: 50%; height: 50%; background: rgba(0, 0, 0, 0.5); z-index: 130; top: 0; left: 0; right: 0; bottom: 0; margin:auto; cursor: pointer; display: none; } .video-fixed .videoboxs .box{ height: 100%; } .video-fixed .videoboxs{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; margin: auto; margin-top: 0; background: #000; /*padding: 30px;*/ box-sizing: border-box; } @media (max-width: 1023px){ .video-fixed{ width: 100%; height: 100%; max-height: 100%; } } @media (max-width: 767px){ .vidcontainer .closevid{ width: .5rem; height: .5rem; } } @media screen and (max-width: 768px) { .video-fixed .videoboxs { width: 100%; height: 80%; bottom: 0; margin: auto; } .video-fixed .cha { right: 10px; top: -35px; } }