CSS   23
video player css
Guest on 27th August 2023 11:55:03 AM


  1. .video-player {}
  2. .video-play, .volume-button {
  3.         cursor: pointer;
  4. }
  5. .video-timer {
  6.         cursor: default;
  7. }
  8.  
  9. /*Start of circle*/
  10. .video-player.circle{
  11.         position:absolute;
  12. }
  13.  
  14. .video-player.circle .bevel{
  15.         width:0px;
  16.         height:0px;
  17.         display:none;
  18. }
  19.  
  20. .video-circle-controls{
  21.         z-index : 50;
  22.     top: 2px;
  23.     background : rgba(0,0,0,0.2);      
  24.         cursor:hand;
  25. }
  26.  
  27. .video-circle-play{
  28.         width: 22px;
  29.         height: 28px;
  30.         position:absolute;
  31.         margin:auto;
  32.         top: 0px;
  33.         bottom: 0px;
  34.         left: 0px;
  35.         right: 0px;
  36.         background: url(icon/video-circle.png) no-repeat -10px -39px;  
  37.         z-index:120;
  38.         cursor:hand;
  39.         -moz-transition: all 0.2s ease-in-out; /* Firefox */
  40.         -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
  41.         -o-transition: all 0.2s ease-in-out;  /* Opera */
  42.         transition: all 0.2s ease-in-out;
  43. }
  44.  
  45. .video-paused-button {
  46.         background: url(icon/video-circle.png) no-repeat -43px -41px;
  47. }
  48.  
  49. .video-circle-play:hover {     
  50.     opacity: 1;
  51. }
  52.  
  53.  
  54. /* volume button */
  55.  
  56. .video-circle-volume-button {
  57.         margin-top:7px;
  58.         right:50px;
  59.         position : absolute;
  60.         display: block;
  61.         width: 15px;
  62.         height: 15px;
  63.         background: url(icon/video-circle.png) no-repeat -6px -6px;
  64. }
  65.  
  66. .video-circle-volume-mute {
  67.         background: url(icon/video-circle.png) no-repeat -32px -6px;
  68. }
  69.  
  70. /*fullscreen*/
  71. .video-circle-player-fullscreen {
  72.         margin-top:7px;
  73.         right : 15px;
  74.         display: block;
  75.         width: 15px;
  76.         height: 15px;
  77.         position : absolute;
  78.         background: url(icon/video-circle.png) no-repeat -57px -6px;
  79. }
  80.  
  81. .video-circle-exit-fullscreen {
  82.         background: url(icon/video-circle.png) no-repeat -79px -6px;
  83. }
  84.  
  85. /*video seek*/
  86. /* seek */
  87. .video-circle-seek {
  88.         position:absolute;             
  89.         width: 70px;
  90.         height: 70px;
  91.         margin: auto;
  92.     top: 0px;
  93.     bottom: 0px;
  94.     left: 0px;
  95.     right: 0px;
  96.     border-radius: 50%;
  97.     background: rgba(0,0,0,0.7);
  98.     z-index: 50;
  99.    
  100. }
  101. .video-circle-time{
  102.         position:absolute;             
  103.         width: 55px;
  104.         height: 35px;
  105.         margin: auto;
  106.     top: 0px;
  107.     bottom: 0px;
  108.     left: 0px;
  109.     right: 0px;
  110.     color: red;
  111.    
  112. }
  113. .video-circle-range{
  114.         position:absolute;
  115.         top:0px;
  116.         left:0px;
  117.         width:60px;
  118.         height:60px;
  119.         z-index:1;
  120.         margin: auto;
  121.     top: 0px;
  122.     bottom: 0px;
  123.     left: 0px;
  124.     right: 0px;
  125.     border-radius: 50%;
  126.     border:2px solid white;
  127.     z-index: 100;
  128.         z-index:2;
  129. }
  130.  
  131. /*Start of default*/
  132. .video-player.default{
  133.         position:absolute;
  134. }
  135.  
  136. .video-player.default .bevel{
  137.         width:0px;
  138.         height:0px;
  139.         display:none;
  140. }
  141.  
  142. .video-player.default .video-controls{
  143.         position: absolute;
  144.         z-index : 2;
  145.         visibility: hidden;
  146.         opacity: 0;
  147.  
  148.         width: 100%;
  149.         left:0px;
  150.         bottom : 4px;
  151.         height:30px;
  152.         background:#222222;
  153.        
  154.         -moz-transition: all 0.2s ease-in-out; /* Firefox */
  155.         -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
  156.         -o-transition: all 0.2s ease-in-out;  /* Opera */
  157.         transition: all 0.2s ease-in-out;
  158. }
  159.  
  160. .video-player.default .control-border{
  161.         position: absolute;
  162.         width: 100%;
  163.         left:0px;
  164.         top:1px;
  165.         height:1px;
  166.        
  167.         background:#444444;
  168. }
  169.  
  170. /*.video-player.default video:hover + .video-controls {
  171.         visibility: visible;
  172.         opacity: 1;
  173. }
  174.  
  175. .video-player.default .video-controls:hover {
  176.         visibility: visible;
  177.         opacity: 1;
  178. }*/
  179.  
  180. .video-player.default .video-play, .video-player.default .volume-box, .video-player.default .volume-button, .video-player.default .video-timer, .video-player.default .player-fullscreen {
  181.         float: left;
  182.         margin-top:4px;
  183. }
  184.  
  185. .video-player.default .video-play {
  186.        
  187.  
  188.         width: 22px;
  189.         height: 22px;
  190.         margin-left:5px;
  191.         margin-right: 10px;
  192.         background: url(icon/player-play.png) no-repeat;       
  193.        
  194.   opacity:0.7;
  195.         cursor:hand;
  196.        
  197.         -moz-transition: all 0.2s ease-in-out; /* Firefox */
  198.         -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
  199.         -o-transition: all 0.2s ease-in-out;  /* Opera */
  200.         transition: all 0.2s ease-in-out;
  201. }
  202.  
  203. .video-player.default .paused-button {
  204.         background: url(icon/player-pause.png) no-repeat;
  205. }
  206.  
  207. .video-player.default .video-play:hover {      
  208.     opacity: 1;
  209. }
  210.  
  211. .video-player.default .video-timer {
  212.         margin-top: 8px;
  213.         margin-right: 10px;
  214.         cursor : default;
  215.         color: #999;
  216.         font-family:Arial, Tahoma;
  217.         font-size: 0.7em;
  218.         font-weight: bold;
  219. }
  220.  
  221. /* volume button */
  222.  
  223. .video-player.default .volume-button {
  224.        
  225.         margin-right:10px;
  226.        
  227.         display: block;
  228.         width: 22px;
  229.         height: 22px;
  230.         background: url(icon/player-volume-full.png) no-repeat;
  231.  
  232.         cursor:hand;
  233.         opacity: 0.8;
  234. }
  235.  
  236. .video-player.default .volume-button:hover {
  237.         opacity: 1;
  238. }
  239.  
  240. .video-player.default .volume-mute {
  241.         background: url(icon/player-volume.png) no-repeat;
  242. }
  243.  
  244. /*fullscreen*/
  245. .video-player.default .player-fullscreen {
  246.         margin-top:6px;
  247.        
  248.         display: block;
  249.         width: 22px;
  250.         height: 22px;
  251.         background: url(icon/player-fullscreen.png) no-repeat;
  252.  
  253.         cursor:hand;
  254.         opacity: 0.8;
  255. }
  256.  
  257. .video-player.default .player-fullscreen:hover {
  258.         opacity: 1;
  259. }
  260.  
  261. .video-player.default .player-exit-fullscreen {
  262.         margin-top:4px;
  263.         background: url(icon/player-exit-fullscreen.png) no-repeat;
  264. }
  265.  
  266. /*video seek*/
  267. /* seek */
  268. .video-player.default .video-seek {
  269.         float:left;
  270.         position:relative;             
  271.         width: 80px;
  272.         height: 10px;
  273.         margin-top: 10px;
  274.         margin-right:10px;     
  275. }
  276.  
  277. .video-player.default .video-seek .slider-total{
  278.         position:absolute;
  279.         top:0px;
  280.         left:0px;
  281.         width:100%;
  282.         height:100%;
  283.        
  284.         z-index:1;
  285.        
  286.         border: 1px solid #494949;
  287.  
  288.         -moz-border-radius:15px;
  289.         -webkit-border-radius:15px;
  290.         border-radius:15px;
  291.        
  292.         background: #535353;
  293.         background-image: -moz-linear-gradient(top, #535353, #333333);
  294.         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
  295.        
  296.         box-shadow: inset 0 -3px 3px #333333;
  297. }
  298.  
  299. .video-player.default .video-seek .slider-range{
  300.         position:absolute;
  301.         top:1px;
  302.         left:0px;
  303.         height:100%;
  304.         -moz-border-radius:15px 0px 0px 15px;
  305.         -webkit-border-radius:15px 0px 0px 15px;
  306.         border-radius:15px 0px 0px 15px;
  307.        
  308.         z-index:2;
  309.        
  310.         background: #4cbae8;
  311.         background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
  312.         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
  313.        
  314.         box-shadow: inset 0 -3px 3px #39a2ce;
  315. }
  316.  
  317. .video-player.default .video-seek .slider-handle{
  318.         position:absolute;
  319.         top:0px;
  320.         left:0px;
  321.        
  322.         width: 10px;
  323.         height: 10px;  
  324.         border: 1px solid #323232;
  325.        
  326.         z-index:3;
  327.  
  328.         -moz-border-radius:10px;
  329.         -webkit-border-radius:10px;
  330.         border-radius:10px;    
  331.        
  332.         background: #e6e6e6;
  333.         background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
  334.         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
  335.        
  336.         box-shadow: inset 0 -3px 3px #d5d5d5;  
  337. }
  338.  
  339. .video-player.default .volume-seek{            
  340.         position: absolute;
  341.         height: 60px;
  342.         width: 6px;
  343.         bottom:30px;
  344.  
  345.        
  346.         visibility: hidden;
  347.         opacity: 0;
  348.  
  349. }
  350.  
  351. .video-player.default .volume-seek:hover {
  352.         visibility: visible;
  353.         opacity: 1;
  354. }
  355.  
  356. .video-player.default .volume-seek .slider-total{
  357.         position:absolute;
  358.         top:0px;
  359.         left:0px;
  360.         width:100%;
  361.         height:100%;
  362.        
  363.         z-index:1;
  364.        
  365.         border: 1px solid #444;
  366.        
  367.         -moz-border-radius:5px;
  368.         -webkit-border-radius:5px;
  369.         border-radius:5px;
  370.        
  371.         background: #535353;
  372.         background-image: -moz-linear-gradient(top, #535353, #333333);
  373.         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
  374.        
  375.         box-shadow: inset 0 3px 3px #333333;
  376. }
  377.  
  378. .video-player.default .volume-seek .slider-range{
  379.         position:absolute;
  380.         bottom:0px;
  381.         left:1px;
  382.         width:100%;
  383.         height:0;
  384.         -moz-border-radius:0px 0px 5px 5px;
  385.         -webkit-border-radius:0px 0px 5px 5px;
  386.         border-radius:0px 0px 5px 5px;
  387.        
  388.         z-index:2;
  389.        
  390.         background: #e6e6e6;
  391.         background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
  392.         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
  393.        
  394.         box-shadow: inset 0 -3px 3px #b9a2ce;
  395. }
Raw Paste

Login or Register to edit or fork this paste. It's free.