/* Video player */ div.videoContainer { display: block; width: 330px; } div.videoContainer div.video-js-box { float: left; padding: 5px 5px 45px!important; border: 1px solid #ddd !important; background: #eee; } div.videoContainer div.video-js-box img.vjs-poster { left: 5px; top: 5px; } /* Big Play Button (at start) ---------------------------------------------------------*/ div.videoContainer div.vjs-big-play-button { display: none; /* Start hidden */ z-index: 2; position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; text-align: center; vertical-align: center; cursor: pointer !important; opacity: 0.6; filter: alpha(opacity=60); background-color: #fff; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */ border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */ /* useful if you don't want a bg color from leaking outside the border: */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } div.videoContainer div.vjs-big-play-button span { display: block; font-size: 0; line-height: 0; width: 0; height: 0; margin: 30px 0 0 35px; opacity: 0.6; filter: alpha(opacity=60); /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */ border-left: 20px solid #000; /* Width & Color of play icon */ /* Height of play icon is total top & bottom border widths. Color is transparent. */ border-top: 15px solid rgba(0,0,0,0); border-bottom: 15px solid rgba(0,0,0,0); }