Display the video title - add title attribute (#88)

Co-authored-by: Jake Paris <[email protected]> Co-authored-by: Jake Paris <[email protected]> Co-authored-by: Paul Irish <[email protected]>
paulirish · Mar 3, 2024 · 498a4f3 · 498a4f3
1 parent 8fef795
commit 498a4f3
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -21,6 +21,7 @@ <h3>View isolated demos:</h3>
       <li><a href="./variants/params.html">lite-youtube-embed - with parameters</a></li>
       <li><a href="./variants/multiple-embeds.html">lite-youtube-embed - multiple embeds on same page</a>
       <li><a href="./variants/js-api.html">lite-youtube-embed - with access to iframe JavaScript API</a>
+      <li><a href="./variants/title.html">lite-youtube-embed - with intial title</a></li>
       <li><a href="./variants/yt.html">normal youtube embed</a>
     </ul>
   </body>

diff --git a/readme.md b/readme.md
@@ -77,6 +77,15 @@ If you want to provide a custom poster image, just set it as the background-imag
 
 Demo: https://paulirish.github.io/lite-youtube-embed/variants/custom-poster-image.html
 
+## Add a video title
+
+If you want to display a title prior to loading the full embed, set the `title` attribute:
+```html
+<lite-youtube videoid="ogfYd705cRs" title="Keynote (Google I/O '18)"></lite-youtube>
+```
+
+Demo: https://paulirish.github.io/lite-youtube-embed/variants/title.html
+
 ## Other fast YouTube embeds
 
 * &lt;lite-youtube&gt; using shadow DOM: [`justinribeiro/lite-youtube`](https://github.com/justinribeiro/lite-youtube) :+1:

diff --git a/src/lite-yt-embed.css b/src/lite-yt-embed.css
@@ -11,14 +11,27 @@ lite-youtube {
 
 /* gradient */
 lite-youtube::before {
-    content: '';
+    content: attr(data-title);
     display: block;
     position: absolute;
     top: 0;
     /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
     background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
     height: 99px;
     width: 100%;
+    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
+    color: hsl(0deg 0% 93.33%);
+    text-shadow: 0 0 2px rgba(0,0,0,.5);
+    font-size: 18px;
+    padding: 25px 20px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+}
+
+lite-youtube:hover::before {
+    color: white;
 }
 
 /* responsive iframe with a 16:9 aspect ratio

diff --git a/src/lite-yt-embed.js b/src/lite-yt-embed.js
@@ -18,6 +18,8 @@ class LiteYTEmbed extends HTMLElement {
         // A label for the button takes priority over a [playlabel] attribute on the custom-element
         this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
 
+        this.dataset.title = this.getAttribute('title') || "";
+
         /**
          * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
          *

diff --git a/variants/title.html b/variants/title.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>lite-youtube-embed - with title</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="../src/lite-yt-embed.css" />
+</head>
+<body>
+<h1><code>lite-youtube</code> custom element</h1>
+
+<p>Add the title attribute to display a title prior to clicking the lite element.</p>
+
+<lite-youtube videoid="ogfYd705cRs" title="Play: Keynote (Google I/O '18)"></lite-youtube>
+
+<script src="../src/lite-yt-embed.js"></script>
+
+</body>
+</html>