s.petushkov
/
styled-youtube-embedding-labwork
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
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
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
1 Commit
1 Gren
Gren: master
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från 'master'
${ noResults }
styled-youtube-embedding-la.../styles.css

109 lines
5.7KB
Rå Permalänk Blame Historik 

  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. }