s.petushkov
/
styled-youtube-embedding-labwork
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
How to embed YouTube video in a webpage with a custom play-button, original poster at the best resolution and responsive container, keeping aspect ratio
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.
1 Commit
1 Branch
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
styled-youtube-embedding-la.../styles.css

109 lines
5.7KB
Raw Permalink Blame History 

  1. body {

  2.     background-color: #2C5282;

  3.     color: #90CDF4;

  4.     font-family: 'Lato', sans-serif;

  5.     font-size: calc(15px + (26 - 15) * ((100vw - 320px) / (1410 - 320)));

  6.     font-weight: 400;

  7.     padding: 1rem;

  8. }

  9. 

  10. a,

  11. a:visited {

  12.     color: #90CDF4;

  13. }

  14. 

  15. .content {

  16.     max-width: 1410px;

  17.     min-width: 280px;

  18.     margin: 0 auto;

  19. }

  20. 

  21. h1 {

  22.     color: #EBF8FF;

  23.     padding-bottom: .5rem;

  24.     border-bottom: 2px solid #90CDF4;

  25.     margin: calc(32px + (64 - 32) * ((100vw - 320px) / (1410 - 320))) 0 calc(12px + (20 - 12) * ((100vw - 320px) / (1410 - 320))) 0;

  26.     font-size: 200%;

  27.     font-weight: 700;

  28. }

  29. 

  30. h2 {

  31.     margin: calc(24px + (48 - 24) * ((100vw - 320px) / (1410 - 320))) 0 calc(2px + (6 - 2) * ((100vw - 320px) / (1410 - 320))) 0;

  32.     font-weight: 700;

  33.     font-size: 160%;

  34. }

  35. 

  36. .youtube-video {

  37.     width: 100%;

  38.     background-color: #2C5282;

  39.     border: 3px solid #90CDF4;

  40.     border-radius: 5px;

  41.     padding: 4px;

  42.     margin: calc(6px + (18 - 6) * ((100vw - 320px) / (1410 - 320))) 0;

  43. }

  44. 

  45. .youtube-video__aspect {

  46.     width: 100%;

  47.     height: 0;

  48.     position: relative;

  49.     padding-top: calc(56.25% - 14px);

  50. }

  51. 

  52. .youtube-video__poster {

  53.     width: 100%;

  54.     height: 100%;

  55.     position: absolute;

  56.     top: 0;

  57.     left: 0;

  58. }

  59. 

  60. .youtube-video__wrapper {

  61.     width: 100%;

  62.     height: 100%;

  63.     position: absolute;

  64.     top: 0;

  65.     left: 0;

  66.     display: flex;

  67.     justify-content: center;

  68.     align-items: center;

  69. }

  70. .youtube-video__wrapper.loading {

  71.     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Ccircle cx='50' cy='50' r='32' style='fill:none;stroke-dasharray:50;stroke-linecap:round;stroke-width:8;stroke:%23e1e6e9'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='1s' repeatCount='indefinite' keyTimes='0;1' values='0 50 50;360 50 50'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='23' style='fill:none;stroke-dasharray:40;stroke-dashoffset:40;stroke-linecap:round;stroke-width:8;stroke:%234ad194'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='1s' repeatCount='indefinite' keyTimes='0;1' values='0 50 50;-360 50 50'/%3E%3C/circle%3E%3C/svg%3E");

  72.     background-position: center;

  73.     background-repeat: no-repeat;

  74.     background-size: auto;

  75. }

  76. 

  77. .youtube-video__play-icon {

  78.     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cstyle%3E.a%7Bfill:%234AD194;%7D%3C/style%3E%3Cpath d='M256 45c116.5 0 211 94.5 211 211 0 116.5-94.5 211-211 211 -116.5 0-211-94.5-211-211C45 139.5 139.5 45 256 45L256 45zM502 256C502 120.1 391.9 10 256 10S10 120.1 10 256c0 135.9 110.1 246 246 246S502 391.9 502 256z' class='a'/%3E%3Cpath d='M467 256C467 139.5 372.5 45 256 45 139.5 45 45 139.5 45 256c0 116.5 94.5 211 211 211C372.5 467 467 372.5 467 256L467 256zM223.1 164.8l57.1 33c0.5 0.3 1 0.6 1.4 0.9l57.2 33c13.4 7.7 18.1 24.9 10.4 38.3 -2.6 4.6-6.4 8.2-10.7 10.5l-58.3 33.7 0 0.1 -58.8 33.9c-13.4 7.8-30.6 3.2-38.4-10.2 -2.6-4.4-3.8-9.3-3.8-14.1h-0.1v-67.8 -67.8c0-15.6 12.6-28.2 28.2-28.2C213.1 160 218.6 161.8 223.1 164.8z' fill='%23E1E6E9'/%3E%3Cpath d='M338.8 231.7l-57.2-33c-0.5-0.3-1-0.6-1.4-0.9l-57.1-33c-4.5-3-9.9-4.8-15.7-4.8 -15.6 0-28.2 12.6-28.2 28.2v67.8 67.8h0.1c0 4.8 1.2 9.6 3.8 14.1 7.8 13.4 25 18 38.4 10.2l58.8-33.9 0 0 58.3-33.7c4.3-2.4 8.1-6 10.7-10.5C356.9 256.6 352.2 239.4 338.8 231.7z' class='a'/%3E%3Cpath d='M256 0C114.8 0 0 114.8 0 256s114.8 256 256 256S512 397.2 512 256 397.2 0 256 0zM256 492C125.9 492 20 386.1 20 256S125.9 20 256 20s236 105.9 236 236S386.1 492 256 492z'/%3E%3Cpath d='M256 35C134.1 35 35 134.1 35 256s99.1 221 221 221 221-99.1 221-221C477 134.1 377.9 35 256 35zM256 457c-110.8 0-201-90.2-201-201C55 145.2 145.2 55 256 55s201 90.2 201 201C457 366.8 366.8 457 256 457z'/%3E%3Cpath d='M108.6 159.3c-4.8-2.8-10.9-1.1-13.7 3.7 -10.9 18.8-18.3 39.2-22.1 60.6 -1 5.4 2.7 10.6 8.1 11.6 0.6 0.1 1.2 0.2 1.8 0.2 4.8 0 9-3.4 9.8-8.3 3.4-19.1 10-37.3 19.7-54.1C115 168.2 113.4 162.1 108.6 159.3z'/%3E%3Cpath d='M441.3 239.9c-0.5-5.5-5.3-9.6-10.8-9.1 -5.5 0.5-9.6 5.3-9.1 10.8 3 34.1-4.5 67.8-21.6 97.4 -2.8 4.8-1.1 10.9 3.7 13.7 1.6 0.9 3.3 1.3 5 1.3 3.5 0 6.8-1.8 8.7-5C436.3 315.8 444.6 278.1 441.3 239.9z'/%3E%3Cpath d='M80 245.4c-5.5 0-10 4.5-10 10L70 256c0 5.5 4.5 10 10 10s10-4.5 10-10l0-0.6C90 249.9 85.5 245.4 80 245.4z'/%3E%3Cpath d='M416.5 213.6c1.2 4.5 5.2 7.5 9.7 7.5 0.8 0 1.7-0.1 2.6-0.3 5.3-1.4 8.5-6.9 7.1-12.2l-0.2-0.6c-1.4-5.3-6.9-8.5-12.3-7.1 -5.3 1.4-8.5 6.9-7.1 12.3L416.5 213.6z'/%3E%3Cpath d='M343.8 223l-57-32.9c-0.6-0.4-1.2-0.7-1.7-1l-56.8-32.8c-6.2-4.1-13.5-6.3-21-6.3 -21.1 0-38.2 17.1-38.2 38.2v135.7c0 0.4 0 0.9 0.1 1.3 0.2 6.3 2 12.4 5.1 17.8 6.8 11.7 19.4 19 33 19 6.7 0 13.3-1.8 19.1-5.1l0 0c0.3-0.2 116.7-67.4 117-67.6l0 0c6-3.3 11-8.3 14.4-14.3C368.3 256.8 362 233.5 343.8 223zM340.5 265c-1.6 2.9-4 5.2-6.9 6.8 0 0-0.1 0.1-0.1 0.1l0.1-0.1c-0.3 0.2-116.9 67.5-117.2 67.7l0 0c-2.8 1.6-5.9 2.4-9.1 2.4 -6.5 0-12.5-3.5-15.7-9 -1.6-2.8-2.4-5.9-2.4-9.1 0-0.4 0-0.7-0.1-1.1v-134.6c0-10 8.2-18.2 18.2-18.2 3.6 0 7.2 1.1 10.1 3.1 0.2 0.1 0.4 0.3 0.6 0.4l115.8 66.9c0.3 0.2-0.3-0.2 0 0 0.2 0.1-0.2-0.1 0 0l0 0c4.2 2.4 7.2 6.3 8.4 11C343.5 256 342.9 260.8 340.5 265z'/%3E%3C/svg%3E%0A");

  79.     background-position: center;

  80.     background-repeat: no-repeat;

  81.     background-size: auto;

  82.     cursor: pointer;

  83.     border-radius: 50%;

  84.     transition: transform .25s;

  85.     width: 150px;

  86.     max-width: 75%;

  87.     height: 150px;

  88.     max-height: 75%;

  89.     opacity: .75;

  90. }

  91. 

  92. .youtube-video__play-icon:hover {

  93.     transform: scale(1.1);

  94. }

  95. 

  96. .youtube-video__iframe {

  97.     width: 100%;

  98.     height: 100%;

  99. }

  100. 

  101. .attributions {

  102.     opacity: .5;

  103.     font-size: 1rem;

  104.     margin-top: 5rem;

  105.     margin-bottom: 1rem;

  106.     text-align: center;

  107.     padding-top: 1.5rem;

  108.     border-top: 2px solid #90CDF4;

  109. }