video.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. .nut-video{
  2. width: 100%;
  3. height: 100%;
  4. position: relative;
  5. display: flex;
  6. .nut-videoplayer{
  7. width: 100%;
  8. }
  9. .playing-mask{
  10. width: 100%;
  11. height: 100%;
  12. position: absolute;
  13. left: 0;
  14. top: 0;
  15. right: 0;
  16. bottom: 0;
  17. }
  18. .nut-video-play-btn{
  19. // display: none;
  20. top: 50%;
  21. left: 50%;
  22. margin-left: -1em;
  23. width: 2em;
  24. border: 0;
  25. background-color: rgba(0,0,0,.45);
  26. color: #fff;
  27. transition: border-color .4s,outline .4s,background-color .4s;
  28. position: absolute;
  29. padding: 0;
  30. cursor: pointer;
  31. opacity: 1;
  32. background-color: rgba(0,0,0,.5);
  33. font-size: 2.5em;
  34. border-radius: 20%;
  35. height: 1.4em;
  36. line-height: 1.4em;
  37. margin-top: -.7em;
  38. text-align: center;
  39. &:hover{
  40. background-color: #cc181e;
  41. }
  42. &:before{
  43. content: '';
  44. background: url('../../assets/img/video-icon.png') no-repeat;
  45. width: 40px;
  46. height: 31px;
  47. display: inline-block;
  48. background-position: 0 0;
  49. background-size: 218px 38px;
  50. }
  51. }
  52. }