How to Embed Switcher Player on a Website

One of Switcher Player's features is the ability to embed onto other websites, allowing for more control over who views your video content and where they view it. This article provides work steps for embedding Switcher Player using some of the most common website builders.

Note: Switcher Player can be embedded in virtually any place where HTML editing is allowed.

Jump to:

How to Access a Switcher Player Embed Code

To add a Switcher Player to your website, you need to get the embed code for the player from your Switcher Studio Dashboard. Once the code is copied, you can paste it into your website builder to publish the player on your website.

To access your Switcher Player embed code:

  • Go to the Switcher Studio Dashboard in a web browser.
  • Click Switcher Players in the left sidebar.
  • Click the Switcher Player you would like to use.
  • Click Copy Code in the Embed Code section.
  • Your Switcher Player embed code will now be copied to your clipboard.
Switcher Player Embed Code
Switcher Player Embed Code

How to Embed a Swither Player on WebFlow

  • Go to your WebFlow page editor.
  • Click the plus icon in the top left to open the Add panel.
  • Click Embed.
  • Paste your Switcher Player embed code.
  • Save and close the modal window.

How to Embed a Switcher Player on Wix

Embedding Switcher Player on a Wix site requires some technical knowledge and only works on paid Wix accounts. This solution involves copying, pasting, and editing JavaScript code in addition to utilizing some advanced settings on the Wix Editor.

Creating the Custom Element

  • Make sure that the editor is set to Dev Mode.
  • In the Editor, click the Public & Backend tab in the sidebar.
  • If one does not already exist, create a folder named "custom-elements".
  • In the custom-elements folder, create a file named "switcher-player.js"
  • Open the file and copy the following code into the text editor tab, replacing "your-player-id" with the player ID of the player you want to embed. This ID can be found at the end of your share link. For example: https://player.switcherstudio.com/watch?p=95e284f5-3f40-4f25-b5df-9a07679482fd
const createPlayerDiv = (playerId) => {
  const player = document.createElement('div');
  player.classList.add('dff402f7-5be0-4890-b831-95c5b63ddb42');
  player.dataset.hostname = 'https://player.switcherstudio.com';
  player.dataset.path = '/embed';
  player.dataset.videoplayerid = playerId;
  player.dataset.location = 'iframe';
  return player;
}

class switcherPlayer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.appendChild(createPlayerDiv('your-player-id'));
    window.switcherPlayerApp.init()
  }
}

customElements.define('switcher-player', switcherPlayer);

Adding the embed.js code

  • Go to the page you would like Switcher Player to be displayed on.
  • Click Add Elements in the Editor sidebar.
  • Navigate to the Embedded Code category and click Custom Code in the Marketing Tools section. This will open a modal to add custom code.
  • Click Add Code below Body - End.
  • Paste this code where it says "Paste your code here": 
<script src = "https://player.switcherstudio.com/embed.js"></script>
  • In the "Code Type" tab of the modal, make sure that the Essential radio button is selected.

Adding the Custom Element in the Editor

  • While on the page you want the player to be located on, click Add Elements in the Editor sidebar.
  • Navigate to the Embedded Code category and click Custom Element.
  • Add the custom element to the page and the position/size as desired.
  • Select the custom element and click Choose Source.
  • In the popup, click the Velo file radio button option.
  • Select switcher-player.js from the dropdown.
  • Type "switcher-player" as the tag name.
  • Close the popup window. You can now reposition and resize the element on the page. The player itself will not appear on the preview page as only the outline of the box will display.
  • Click Publish in the top right corner to see your changes live.

How to Embed a Switcher Player on SquareSpace

  • Go to your Squarespace admin page.
  • Click Pages in the left sidebar.
  • Click the page you would like to use.
  • Click Edit in the top-left corner of the page preview.
  • Click Add Block.
  • Click Embed.
  • Click Code Snippet.
  • Click Embed Data.
  • Paste your Switcher Player embed code into the text field.
  • Hover over Done in the top-left corner and click Save.

Note: The preview page may display “Script Disabled”, but this only appears in the page editor. When you save the changes your Switcher Player will appear.

How to Embed a Switcher Player on Shopify

  • Go to your Shopify admin page.
  • Click Online Store in the left sidebar.
  • Click Pages in the left sidebar.
  • Click the page you would like to add Switcher Player to.
  • Click <> in the top-right corner of the text editor.
  • Paste the Switcher Player embed code into the text editor.
  • Click Save in the bottom right corner.

Still need help? Contact Us Contact Us