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
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

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