You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

104 line
1.9 KiB

  1. .ce_youtube {
  2. margin-bottom: 2rem;
  3. .video_container {
  4. position: relative;
  5. padding-bottom: 56.25%;
  6. width: 100%;
  7. height: auto;
  8. }
  9. img,
  10. iframe {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. right: 0;
  15. bottom: 0;
  16. width: 100% !important;
  17. height: 100% !important;
  18. }
  19. &.spwn-youtube {
  20. position: relative;
  21. display: flex;
  22. justify-content: flex-end;
  23. min-height: 300px;
  24. margin-bottom: 6rem;
  25. &:before {
  26. content: "";
  27. position: absolute;
  28. left: 0;
  29. top: 50%;
  30. z-index: -1;
  31. transform: translate(0, -50%);
  32. width: 100%;
  33. height: 268px;
  34. background: $secondary;
  35. border-radius: 30px;
  36. }
  37. h2, h3 {
  38. color: #fff;
  39. position: absolute;
  40. left: 50px;
  41. top: 50%;
  42. transform: translate(0, -50%);
  43. padding-bottom: 0;
  44. }
  45. .video_container {
  46. width: 717px;
  47. padding-bottom: 0;
  48. margin-right: 85px;
  49. .responsive {
  50. position: relative;
  51. padding-bottom: 56.25%;
  52. width: 100%;
  53. height: auto;
  54. }
  55. a {
  56. display: block;
  57. &:after {
  58. content: "";
  59. position: absolute;
  60. left: 50%;
  61. top: 50%;
  62. transform: translate(-50%, -50%);
  63. width: 77px;
  64. height: 78px;
  65. mask-image: url("../images/elements/youtube-play-icon.svg");
  66. mask-repeat: no-repeat;
  67. mask-position: left top;
  68. mask-size: 100% auto;
  69. background-color: #fff;
  70. }
  71. &:hover {
  72. &:after {
  73. background-color: $youtube-red;
  74. }
  75. }
  76. }
  77. img,
  78. iframe {
  79. border-radius: 20px;
  80. }
  81. }
  82. .caption {
  83. position: absolute;
  84. left: 30px;
  85. bottom: 30px;
  86. padding-right: 30px;
  87. font-size: size(24);
  88. line-height: size(30);
  89. color: #fff;
  90. }
  91. }
  92. }