Youtube player and data

Display youtube videos and search for videos

High-level overview

This plugin can be used for a non-responsive YouTube video display (video will always be the same width, unless set to fullscreen mode).

It can also be used to access some YouTube Data API calls, like searching for videos.

Demo

Editor: https://bubble.io/page?type=page&name=youtube-plugin&id=chris-sandbox&tab=tabs-2

Run mode: http://chris-sandbox.bubbleapps.io/version-test/youtube-plugin?debug_mode=true (username/password)

Technical details

Element (iFrame video display)

General description

Implementation of the YouTube iframe API. This allows you to put a non-responsive (fixed width) Bubble element on the page that will display Youtube Videos.

Combine this with the Data API to find video IDs to play, and later play them.

If any features are missing or broken, please contact [email protected] to request changes or to scope out larger features.

Fields

  • Initial Video ID

    • The video that should be shown when the page is loaded

  • Autoplay initial video

    • Should the initial video automatically play on page load?

  • Autoplay between videos

    • Should each subsequent video automatically play when the old one ends?

    • Doesn't work on mobile (due to device restrictions)

  • Controls

    • Show the UI controls for the video player. When hidden, users can still use keyboard shortcuts to pause video, go fullscreen, move forward or back, etc.

  • Loop

    • When queue of videos is done playing, restart from the beginning of the queue

Exposed States

  • Is playing

  • Queued videos (IDs)

  • Now playing video ID

  • Playback state

    • Can be any of the following texts: "Playing", "Ended", "Paused", "Buffering", or "Cued"

  • Queue Position (number)

    • Designates the position in the queue of the current song. The first song in the queue is in position 1.

  • Is Ready

    • This is "yes" after the plugin is loaded and ready to start playing. In initial tests, this happens almost immediately after page load, or even before Bubble "page is loaded" actions.

  • Error code

    • Seems to not actually be returned by the iFrame API, but it should return an error code. The meaning of this code is in the Error message state.

  • Error message

    • Plain english explanation of the error code (if an error happens). Taken directly from the official google docs in February 2021.

  • Playback quality

    • The quality of the video (e.g. 480p).

  • Playback rate

    • The speed of playback. Seems to be empty by default. When played at half-speed, this value will be the number 0.5.

Actions

  • Playback actions

    • Play

    • Pause

    • Stop

    • Skip to next video

    • Skip to previous video

  • Queue actions

    • Play next (immediately after this song in queue)

    • Play later (end of queue)

    • Skip to position in queue

      • Go to a specific song in the queue

      • If the user enters an invalid number AND the "Loop" field is "yes", the plugin takes the "remainder" or modulo of that number. For example, if there are 7 songs in the queue and the user enters the number "8" for this action, then the 1st song is played. If there are 7 songs and the user enters "11", song number 4 is played.

    • (Not yet implemented) Set queue by video IDs

      • Overwrite the entire queue with a whole new queue of video IDs, sent as one text with IDs separated by commas

Quirks/notes

May add additional information here later, or will add them in the specific action, state or field where they apply.

Data API

Some basic calls from the YouTube Data API are included with the plugin. If you need different API calls or implement them yourself and think they would be useful to add to the plugin, contact [email protected]

This API uses a quota system to track usage. See here for more info. By default, accounts have 10,000 quota points (as of March 2 2021). Clients can request more quota points from Google.

Actions

  • Search all videos

    • Return a list of all videos matching a keyword. Uses 100 quota points, so this is relatively expensive.

  • Get specific YouTube video

    • Given one video's ID, get information about that specific video.

    • Uses 1 quota point

  • List videos

    • List videos in a playlist, by IDs, or list the most popular videos.

    • Uses 1 quota point

References

iFrame/js docs

Data API docs

Quota doc