https://github.com/anthonylan/ythook

A simple Youtube playlist library
https://github.com/anthonylan/ythook

youtube-playlist youtube-playlist-library youtube-playlist-player youtube-video

Last synced: 10 days ago
JSON representation

A simple Youtube playlist library

• Host: GitHub
• URL: https://github.com/anthonylan/ythook
• Owner: anthonylan
• Created: 2019-12-21T11:41:18.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T18:02:52.000Z (about 2 years ago)
• Last Synced: 2024-11-10T20:05:07.156Z (2 months ago)
• Topics: youtube-playlist, youtube-playlist-library, youtube-playlist-player, youtube-video
• Language: CSS
• Homepage:
• Size: 763 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# YT Hook



Hook is a simple Youtube playlist library that uses multiple playlist IDs to display videos in sequence. It requires 2 different playlist ids on a single page.

Example: 

``mainPlayListId``: the main playlist for that specific page

``nextPlayListId``: the next playlist from the upcoming page.

---

## 🚀 Demo

#### 👉 [See demo on the official site](https://ythook.marraine.co/)

----

## 🤔 How to use it?

Add styles in ``

```html

```

Add the scripts right before closing `` tag, and declare your two playlist IDs:

```html

 

    

    let mainPlayListId = 'playlistID1'

    let nextPlayListId = 'playlistID2'

    

```

I know, I know, nobody likes jQuery anymore. I promise the next version it won't be jQuery dependent anymore.  

## HTML

Hook uses a pre-defined html structure:

```html

 
 

    


        Billie Eilish

        The weeknd

        migos

        Post malone

        sia

        camila cabello

    

    


```

To display the next playlist at the left side of the page you'll need to add:

```html



```

at the very top of the 


>section tag

Like this: 

```html



    
 

        


            Billie Eilish

            The weeknd

            migos

            Post malone

            sia

            camila cabello

        

  


```        

The `class` => `isActive` adds a red line at the bottom of the link on the current page, and should be removed or added following the page sequence.

## Initialize Hook?

No need to initialize Hook, it has already been initialized. 

## ❔Have Questions?

If you found a bug, have a question or an idea, please don't hesitate to create new issues.