Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display the video title - add title attribute #88

Merged
merged 9 commits into from
Mar 3, 2024
Merged

Display the video title - add title attribute #88

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
064be9a
Added title attribute: render title prior to load
Jul 8, 2021
ecd152f
handle "null" string from non-existant attribute
Jul 8, 2021
df45a2e
Added attr. to specify which tag is used for title
Sep 22, 2021
74d7752
Remove ability to customize title tag
Jan 4, 2022
2916f75
Put title in pseudo attr for perf gains
Jan 4, 2022
e8e13fa
Merge branch 'master' into master
Jan 4, 2022
3b78089
Merge remote-tracking branch 'origin/master' into jakeparis/master
paulirish Mar 2, 2024
6ccd1a9
Merge remote-tracking branch 'origin/master' into jakeparis/master
paulirish Mar 2, 2024
4ee343e
minimal style cleanup
paulirish Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ <h3>View isolated demos:</h3>
<li><a href="./variants/pe.html">lite-youtube-embed - progressively enhanced</a>
<li><a href="./variants/custom-poster-image.html">lite-youtube-embed - custom poster image</a>
<li><a href="./variants/params.html">lite-youtube-embed - with parameters</a></li>
<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>
Expand Down
12 changes: 12 additions & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,18 @@ 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>
```
By default the header text will be in a `<div>` element. You can customize which element is used with the `title-tag` attribute. For example:

```html
<lite-youtube videoid="ogfYd705cRs" title-tag="h2" title="Keynote (Google I/O '18)"></lite-youtube>
```

## Other lite embeds

- Youtube: [`justinribeiro/lite-youtube`](https://github.com/justinribeiro/lite-youtube) - Shadow-DOM-using port of paulirish/lite-youtube-embed
Expand Down
33 changes: 33 additions & 0 deletions src/lite-yt-embed.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,36 @@ lite-youtube.lyt-activated > .lty-playbtn {
white-space: nowrap;
width: 1px;
}

lite-youtube .lyt-title-text {
font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
color: hsla(0,0%,100%,.9);
text-align: left;
direction: ltr;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think this is a bit overstyled. i want the CSS & JS to be as small as reasonably possible, so i'd like to only include these if totally necessary. Can you whittle these down a bit?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed extraneous things, and moved styles to ::before element. Also, I changed the background from a base64 encoded svg into a linear-gradient, because the svg isn't stretching correctly when title text expands the element.

line-height: 1.3;
text-shadow: 0 0 2px rgba(0,0,0,.5);
vertical-align: top;
font-size: 18px;
font-weight: 400;
flex: 1;
padding-top: 21px;
padding-left: 20px;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
position: relative;
}
@media(min-width: 800px){
lite-youtube .lyt-title-text {
font-size: 20px;
}
}
lite-youtube:hover .lyt-title-text {
color: white;
}
lite-youtube.lyt-activated > .lyt-title-text {
opacity: 0;
pointer-events: none;
}
10 changes: 10 additions & 0 deletions src/lite-yt-embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ 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.title = this.getAttribute('title');
this.titleTag = this.getAttribute('title-tag') || 'div';

/**
* Lo, the youtube placeholder image! (aka the thumbnail, poster image, etc)
*
Expand All @@ -35,6 +38,13 @@ class LiteYTEmbed extends HTMLElement {
this.style.backgroundImage = `url("${this.posterUrl}")`;
}

if( this.title && this.title !== 'null' ) {
const titleEl = document.createElement( this.titleTag );
titleEl.classList.add('lyt-title-text');
titleEl.textContent = this.title;
this.append( titleEl );
}

// Set up play button, and its visually hidden label
if (!playBtnEl) {
playBtnEl = document.createElement('button');
Expand Down
19 changes: 19 additions & 0 deletions variants/title.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>