Embed and control video

Switch Tube encourages video to be viewed on other websites and apps. Three different methods to embed and control video are available:

Copy the HTML embed from the sidebar on each video page to embed the Switch Tube player in your webpage.
Enable External playback if you want to load video from Switch Tube into your own player or in an app.
Use the JavaScript embed library to add and control the Switch Tube player on your webpage with JavaScript.

External playback is only available on channels with their view permission set to “Everyone” or “Anyone with the link to the video”. Embeds from channels that require authentication don’t play video, but instead show a link to the video page on Switch Tube.

HTML embed

Click “Embed” below the player on a video page to reveal its embed HTML. Copy the embed HTML and paste it into your webpage.

Here’s an example of what the embed HTML might look like:

You can change the values of the width and height attributes, or leave them out and control the size of the iframe element using CSS. The embedded player will adjust to fill the iframe.

Notice the ?title=hide at the end of the URL. This is added when you enable “Don’t show title”. Add ?muted=true to silence audio initially. You can also set default subtitles or captions using the parameter from its “Details” page. For example, ?captions=en-US enables English (United States) captions while ?subtitles=de&title=hide enables German subtitles and also hides the title.

External playback

Click the “Edit channel” button. Enable “External playback” under “Advanced options” and save your changes. The “Edit” page of each video in the channel now contains an external playback URL to load the video in an external player.

Here’s an example of what an external playback URL might look like:

https://tube.switch.ch/external/d42e0c7f

Notice how you can also get the external playback URL for a video by replacing video with external in the URL of a video page. This only works when “External playback” is enabled on the channel.

Among other things, an external playback URL can be used for the src attribute of a HTML video element, for example to automatically play a video in a loop:

JavaScript embed library

Load the embed library inside the head element of your webpage:

Add a container element for the player:

Define a function that adds a video to the container:

function addVideo() {
  let container = document.querySelector('div#video')

  SwitchTubeEmbed.player(
    container,
    'https://tube.switch.ch/videos/d42e0c7f'
  )
}

Because the embed library is loaded asynchronous, it might not yet be available when your code runs. To deal with this, only call addVideo() when SwitchTubeEmbed is defined and wait for the SwitchTubeEmbed:ScriptLoaded event otherwise:

if (window.SwitchTubeEmbed) {
addVideo()
} else {
window.addEventListener('SwitchTubeEmbed:ScriptLoaded', addVideo)
}

A SwitchTubeEmbed:load event will be triggered on the container element when the player for its video has loaded. The detail property of this event contains a reference to the control object for the player.

If you want to control the player, add a listener for this event to the function that adds the video:

function addVideo() {
  let container = document.querySelector('div#video')

  container.addEventListener('SwitchTubeEmbed:load', (event) => {
    let player = event.detail

    player.duration().then((value) => {
      console.log(value)
    })
    player.play()
  }

  SwitchTubeEmbed.player(
    container,
    'https://tube.switch.ch/videos/d42e0c7f'
  )
}

See the “Add and control player” usage example on GitHub for a complete demonstration of the approach described above.

`SwitchTubeEmbed:ScriptLoaded`

Event triggered on the global window when the embed library has been loaded and is ready for use.

`SwitchTubeEmbed.player(container, url)`

Load a player into the given container element reference for the video at the given URL. The container element reference can be an Element instance, a CSS selector, or an element id string. The URL can be the video page URL or the embed URL. The URL may include query parameters that control the appearance of the player (e.g. ?title=hide to hide the video title) and a fragment identifier can be appended to set the start time (e.g. #30 to start at 30 seconds).

`SwitchTubeEmbed:load`

Event triggered on the container element in which a player was loaded when the player is ready for use. The detail property of this event contains a reference to the player control object.

`player = SwitchTubeEmbed.control(iframe)`

Return a player control object for the given iframe reference. The iframe reference can be an Element instance, a CSS selector, or an element id string. Intended to be used with the HTML embed method as demonstrated in the “Control existing iframe” usage example on GitHub.

`player.play()`

Control object method that starts playback.

`player.pause()`

Control object method that pauses playback.

`player.seek(time)`

Control object method that seeks playback to the given time in seconds. Fractional values are allowed.

`player.ready()`

Control object method that resolves to true when the video is ready for playback, false otherwise.

`player.playing()`

Control object method that resolves to true when the video is currently playing, false when the video is paused.

`player.duration()`

Control object method that resolves to the duration of the video in seconds.

`player.currentTime()`

Control object method that resolves to the current playback time in seconds.