.video-js .vjs-big-play-button {
background: transparent;
line-height: 0;
height: 0;
width: 0;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 0;
cursor: pointer;
opacity: 1;
background-color: transparent;
border-radius: 0;
transition: none;
border: 0;
-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.video-js .vjs-big-play-button:after{
content: "";
font-size: 0;
top: 0px;
left: 0px;
border: 21px solid transparent;
border-left: 36px solid #fff;
-webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,.1));
filter: drop-shadow(0px 0px 1px rgba(0,0,0,.1));
}
.video-js .vjs-big-play-button:before{
content: "";
font-size: 0;
top: -35px;
left: -9px;
border: 40px solid transparent;
border-left: 63px solid #2C77D2;
-webkit-filter: drop-shadow(1px 1px 10px #000000);
filter: drop-shadow(1px 1px 10px #000000);
-webkit-transition: all 1s cubic-bezier(.25,.8,.25,1);
-moz-transition: all 1s cubic-bezier(.25,.8,.25,1);
-o-transition: all 1s cubic-bezier(.25,.8,.25,1);
transition: all 1s cubic-bezier(.25,.8,.25,1);
}
.vjs-big-play-centered .vjs-big-play-button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
outline: 0;
border-color: transparent;
background-color: transparent;
background-color: transparent;
transform: translate(-50%, -50%) scale(1.1);
-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.video-js:hover .vjs-big-play-button:before{
-webkit-filter: drop-shadow(1px 1px 15px #000000);
filter: drop-shadow(1px 1px 15px #000000);
border-left-color: #3A8CF0;
} |