Embed and control video

SWITCHtube 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 SWITCHtube player in your webpage.
  • Enable External playback if you want to load video from SWITCHtube into your own player or in an app.
  • Use the JavaScript embed library to add and control the SWITCHtube 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 SWITCHtube.

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:

<iframe width="640" height="360" src="https://tube.switch.ch/embed/d42e0c7f?title=hide" frameborder="0" allow="fullscreen" allowfullscreen></iframe>

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.

Also notice the ?title=hide at the end of the URL. This is added when you enable “Don’t show 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:

<video src="https://tube.switch.ch/external/d42e0c7f"
       autoplay loop playsinline muted
       style="width: 100%"></video>

JavaScript embed library

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

<script async src="https://tube.switch.ch/js/embed.js"></script>

Add a container element for the player:

<div id="video"></div>

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.