Video Player “Width Issue”

enter image description here

Hello”I buy theme and when i upload video width size half see in image please help me to solve this issue & i am upload openload load movies and in theme have custom css option

openload embed code:

iframe src=”https://openload.co/embed/QN8LwSy5tW8/The_Vampire_Diaries_S01E04_HDTV_%5BGlowGaze.Com%5D.mp4″ scrolling=”no” frameborder=”0″ width=”100%” height=”100%” allowfullscreen=”true” webkitallowfullscreen=”true” mozallowfullscreen=”true”>

code custom.css

.error-block{display:none;color:red}.jw-skin-seven .jw-overlay .jw-playlist-container{width:400px;left:-20%}.jwplayer .jw-playlist{height:250px}.jwplayer .jw-playlist .jw-option{padding:0 15px;margin:auto;text-align:left}.jw-playlist .jw-name{width:30em!important}#content-embed iframe{width:100%!important;height:100%!important}.bp-btn-like.active i{color:#79C142}.qtip{max-width:320px;}.qtip .qtip-content{font-size:12px;padding:12px;overflow:visible}.qtip .qtip-content .f-desc{line-height:1.3em!important;font-size:12px!important}.qtip .qtip-title{margin-right:60px;background:#fff;color:#71B43E;font-size:16px;font-weight:600;padding:0 0 12px;line-height:normal}.qtip .qtip-titlebar{background:none!important;padding:0!important}.jtip-quality{top:13px;right:12px}#media-player{position:relative}.loading-film{position:absolute;top:0;right:0;bottom:0;left:50%;color:#fff;width:200px;text-align:center;height:180px;margin-left:-100px;top:50%;margin-top:-90px}.content-kus{overflow:hidden}.content-kus div{margin:0 auto!important}.cssload-center{position:relative;text-align:center;width:100%;min-height:70px;background:transparent}.cssload-2x{min-height:100px}.cssload-3x{min-height:160px}.cssload{width:40px;height:40px;position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;margin:auto}.cssload-2x .cssload{width:60px;height:60px}.cssload-3x .cssload{width:120px;height:120px}.cssload-3x .cssload span,.cssload-3x .cssload span:before,.cssload-3x .cssload span:after{border-width:3px!important}.cssload *{box-sizing:content-box}.cssload span,.cssload span:before,.cssload span:after{top:0;left:0;position:absolute;border-bottom:2px solid transparent!important;border:2px solid #79C142;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;width:100%!important;height:100%!important;display:inline-block}.cssload span{margin:-2px 0 0 -2px;animation:cssload-rotate 1150ms linear infinite;-o-animation:cssload-rotate 1150ms linear infinite;-ms-animation:cssload-rotate 1150ms linear infinite;-webkit-animation:cssload-rotate 1150ms linear infinite;-moz-animation:cssload-rotate 1150ms linear infinite}.cssload span:before{content:””;margin:5% 0 0 5%;height:90%!important;width:90%!important;animation:cssload-rotate 1150ms linear infinite;-o-animation:cssload-rotate 1150ms linear infinite;-ms-animation:cssload-rotate 1150ms linear infinite;-webkit-animation:cssload-rotate 1150ms linear infinite;-moz-animation:cssload-rotate 1150ms linear infinite}.cssload span:after{content:””;position:absolute;top:15%;left:15%;height:70%!important;width:70%!important;animation:cssload-rotate 2300ms linear infinite;-o-animation:cssload-rotate 2300ms linear infinite;-ms-animation:cssload-rotate 2300ms linear infinite;-webkit-animation:cssload-rotate 2300ms linear infinite;-moz-animation:cssload-rotate 2300ms linear infinite}.cssload-2x .cssload span::after,.cssload-3x .cssload span::after{top:13%;left:13%;height:74%!important;width:74%!important}@keyframes cssload-rotate{100%{transform:rotate(360deg)}}@-o-keyframes cssload-rotate{100%{-o-transform:rotate(360deg)}}@-ms-keyframes cssload-rotate{100%{-ms-transform:rotate(360deg)}}@-webkit-keyframes cssload-rotate{100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes cssload-rotate{100%{-moz-transform:rotate(360deg)}}.ps-container{-ms-touch-action:none;overflow:hidden!important}.ps-container.ps-active-x > .ps-scrollbar-x-rail,.ps-container.ps-active-y > .ps-scrollbar-y-rail{display:block}.ps-container.ps-in-scrolling{pointer-events:none}.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x{background-color:#999}.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y{background-color:#999}.ps-container > .ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;bottom:3px;height:8px}.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container > .ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;opacity:0;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;right:3px;width:6px}.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y{position:absolute;background-color:#555;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:6px}.ps-container:hover.ps-in-scrolling{pointer-events:none}.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x{background-color:#999}.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail{background-color:#888;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y{background-color:#999}.ps-container:hover > .ps-scrollbar-x-rail,.ps-container:hover > .ps-scrollbar-y-rail{opacity:.6}.ps-container:hover > .ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x{background-color:#999}.ps-container:hover > .ps-scrollbar-y-rail:hover{background-color:#888;opacity:.9}.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y{background-color:#999}@media screen and (min-width: 640px) and (max-width: 800px) { .movieplay, .movieplay .wp-video .mejs-container{height: 300px!important; }} @media screen and (min-width: 480px) and (max-width: 639px) { .movieplay, .movieplay .wp-video .mejs-container{height: 300px!important; }} @media screen and (max-width: 479px) { .movieplay, .movieplay .wp-video .mejs-container {height: 200px!important;}} @media screen and (min-width: 801px) and (max-width: 899px) {.movieplay, .movieplay .wp-video .mejs-container{height: 400px!important; }} @media screen and (min-width: 900px) { .movieplay, .movieplay .wp-video .mejs-container{height: 500px!important;}} .movieplay .wp-video .mejs-container {width: 100%!important;max-height: 500px!important;} .movieplay .wp-video { width: 100%!important;}@media screen and (max-width: 480px){.qtip{display:none!important;}}

Read more here:: Video Player “Width Issue”

Leave a Reply

Your email address will not be published. Required fields are marked *