_video.scss 885B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /*
  2. * Owl Carousel - Video Plugin
  3. */
  4. .owl-carousel{
  5. .owl-video-wrapper {
  6. position: relative;
  7. height: 100%;
  8. background: #000;
  9. }
  10. .owl-video-play-icon {
  11. position: absolute;
  12. height: 80px;
  13. width: 80px;
  14. left: 50%;
  15. top: 50%;
  16. margin-left: -40px;
  17. margin-top: -40px;
  18. background: url("owl.video.play.png") no-repeat;
  19. cursor: pointer;
  20. z-index: 1;
  21. -webkit-backface-visibility: hidden;
  22. transition: transform 100ms ease;
  23. }
  24. .owl-video-play-icon:hover {
  25. transform: scale(1.3, 1.3);
  26. }
  27. .owl-video-playing .owl-video-tn,
  28. .owl-video-playing .owl-video-play-icon {
  29. display: none;
  30. }
  31. .owl-video-tn {
  32. opacity: 0;
  33. height: 100%;
  34. background-position: center center;
  35. background-repeat: no-repeat;
  36. background-size: contain;
  37. transition: opacity 400ms ease;
  38. }
  39. .owl-video-frame {
  40. position: relative;
  41. z-index: 1;
  42. height: 100%;
  43. width: 100%;
  44. }
  45. }