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.

97 line
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>