https://github.com/i1li/lightest-youtube-embed
Minimal, privacy-first YouTube video embed. Show / hide toggle button saves space and resources until needed. Also embeds playlists, and generates custom playlists without an account.
https://github.com/i1li/lightest-youtube-embed
embed minimal playlist privacy video youtube youtube-embed
Last synced: 2 months ago
JSON representation
Minimal, privacy-first YouTube video embed. Show / hide toggle button saves space and resources until needed. Also embeds playlists, and generates custom playlists without an account.
- Host: GitHub
- URL: https://github.com/i1li/lightest-youtube-embed
- Owner: i1li
- Created: 2024-03-01T02:28:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-01T03:31:02.000Z (over 1 year ago)
- Last Synced: 2025-04-01T11:53:57.178Z (over 1 year ago)
- Topics: embed, minimal, playlist, privacy, video, youtube, youtube-embed
- Language: JavaScript
- Homepage: https://y0.netlify.app/
- Size: 32.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lightest YouTube Embed
The lightest YouTube video embed ever: eliminates need for YouTube Iframe API, with totally responsive resizing, and inline capability that doesn't cause line breaks. Also supports playlist embedding, and playlist creation from scratch without an account. Show / hide toggle button eliminates wasted space and resources, and increases user privacy.
You can view the [Demo site](https://y0.netlify.app/) as part of [Minimal, Responsive, Pure Javascript, Single Page App](https://github.com/i1li/i)
### Example usage:
```html
```
Shows a link to view in new tab, with a show/hide button next to it.
'v' is just the id from the YouTube URL, after the part that says "watch?v=". You can use a playlist ID from a playlist that is already generated, or make your own by putting multiple video IDs, comma separated.
't' is an optional field for title, if empty, default text is "View Video", or use `yt-titles.js` to automatically populate 't' with its title on YouTube. To do this, simply run `node yt-titles.js`. This will add appropriate 't' attributes to every element that doesn't already have one in your index.html file.
You can include [params](https://developers.google.com/YouTube/player_parameters#Parameters) like in the following examples:
```html
```
If a video is set as not embeddable by YouTube and you'd just like to make a link for it, include class name "no-embed":
```html
```
Links for videos by default open at YouTube's minimal embed address, youtube-nocookie.com/embed . Some videos are allowed to be embedded, but not played at the standalone embed address, so just give those the class name "no-link-embed", and they will still be embedded, but the hyperlink will be to the main youtube.com version. (Links with "no-embed" class already get this behavior)
```html
```
TODO: handle detection of embed permissions, to assign "no-embed" and "no-link-embed" automatically. Please submit a comment or pull request if you know a solution.
#### Code Summary
The code defines a class `YTEmbed` that extends `HTMLElement`, allowing you to create a custom web component. Here's a breakdown of the key parts of the code:
- **Constructor**: Initializes the custom element, parsing the video ID and parameters from the element's `id` attribute. It decides the base URL based on the presence of certain classes and constructs the video URL accordingly. It also creates a link as a fallback or primary way to view the video and a button to toggle the video display.
- `toggleVideo`** Method**: Checks if an iframe already exists within the element. If not, it creates one with the appropriate source URL and adds it to the DOM, allowing the video to be played within the page. If an iframe exists, it removes it, effectively toggling the video display.
- **Custom Element Registration**: The last line of the code, `customElements.define('y-t', YTEmbed);`, registers the custom element with the browser, allowing you to use `` tags in your HTML to embed YouTube videos with this custom behavior.
#### Key JavaScript Features Used
- **Template Literals**: Used for string interpolation and constructing URLs dynamically. Template literals are enclosed by backtick (\`) characters and allow embedded expressions, which are included in the string using `${expression}` syntax [1](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), [2](https://www.w3schools.com/js/js_string_templates.asp)
- **Custom Elements API**: Allows developers to define new HTML tags (custom elements) and their behavior. The `customElements.define()` method registers a new custom element with the browser [3](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
- **DOM API**: Methods like `document.createElement()`, `appendChild()`, and `querySelector()` are used to dynamically manipulate the page's content by adding or removing elements [4](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute), [5](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), [6](https://www.w3schools.com/jsref/met_document_createelement.asp)
- `getAttribute`** Method**: Retrieves the value of a specified attribute from the element. If the attribute does not exist, it returns `null` or an empty string [7](https://www.w3schools.com/jsref/met_element_getattribute.asp)
This code exemplifies modern JavaScript practices for creating reusable web components that enhance the functionality and interactivity of web pages.