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.

97 lines
4.3KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Styled YouTube Embedding Labwork</title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
  8. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
  9. <link rel="stylesheet" href="styles.css" />
  10. <script>
  11. window.youtube_img_load_check = function (e) {
  12. var thumbnail = ["maxresdefault", "mqdefault", "sddefault", "hqdefault", "default"];
  13. var url = e.getAttribute("src");
  14. if (e.naturalWidth === 120 && e.naturalHeight === 90) {
  15. for (var i = 0, len = thumbnail.length - 1; i < len; i++) {
  16. if (url.indexOf(thumbnail[i]) > 0) {
  17. e.setAttribute("src", url.replace(thumbnail[i], thumbnail[i + 1]));
  18. break;
  19. }
  20. }
  21. }
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <div class="content">
  27. <header>
  28. <h1>Styled&nbsp;YouTube Embedding&nbsp;Labwork</h1>
  29. <noscript>
  30. <p>This page requires JavaScript to function correctly.</p>
  31. </noscript>
  32. <p>The page layout is responsive.</p>
  33. </header>
  34. <section>
  35. <h2>High&nbsp;resolution video&nbsp;example</h2>
  36. <p>It loads maxresdefault.jpg successfully.</p>
  37. <div class="youtube-video">
  38. <div class="youtube-video__aspect">
  39. <div class="youtube-video__wrapper">
  40. <img class="youtube-video__poster"
  41. src="https://img.youtube.com/vi/jIHvgUAW5vE/maxresdefault.jpg"
  42. onload="window.youtube_img_load_check(this)" alt="1080p resolution youtube-video"
  43. loading="lazy" />
  44. <div class="youtube-video__play-icon" data-link="https://www.youtube.com/embed/jIHvgUAW5vE">
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </section>
  50. <section>
  51. <h2>Low&nbsp;resolution video&nbsp;example</h2>
  52. <p>The maxresdefault.jpg fails to load and switches to mqdefault.jpg which loads successfully.</p>
  53. <div class="youtube-video">
  54. <div class="youtube-video__aspect">
  55. <div class="youtube-video__wrapper">
  56. <img class="youtube-video__poster"
  57. src="https://img.youtube.com/vi/chPdcSRI4FU/maxresdefault.jpg"
  58. onload="window.youtube_img_load_check(this)" alt="144p resolution youtube-video"
  59. loading="lazy" />
  60. <div class="youtube-video__play-icon" data-link="https://www.youtube.com/embed/chPdcSRI4FU">
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </section>
  66. <section>
  67. <h2>4:3&nbsp;aspect&nbsp;ratio video&nbsp;example</h2>
  68. <div class="youtube-video">
  69. <div class="youtube-video__aspect">
  70. <div class="youtube-video__wrapper">
  71. <img class="youtube-video__poster"
  72. src="https://img.youtube.com/vi/mM5_T-F1Yn4/maxresdefault.jpg"
  73. onload="window.youtube_img_load_check(this)" alt="4:3 aspect ratio youtube-video"
  74. loading="lazy" />
  75. <div class="youtube-video__play-icon" data-link="https://www.youtube.com/embed/mM5_T-F1Yn4">
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </section>
  81. <footer>
  82. <div class="attributions">
  83. Play icon from&nbsp;<a href="https://www.flaticon.com/" title="Flaticon"
  84. rel="noopener noreferrer nofollow" target="_blank">www.flaticon.com</a>
  85. &bull;
  86. Loading indicator from&nbsp;<a href="https://loading.io/" title="LOADING.IO"
  87. rel="noopener noreferrer nofollow" target="_blank">loading.io</a>
  88. </div>
  89. </footer>
  90. </div>
  91. <script src="scripts.js"></script>
  92. </body>
  93. </html>