Editing the Embed Code

For users who wish to edit the Streamable embed code, this tutorial is for you! In this walkthrough, we cover changing the embed code for the following features: loop, autoplay, no controls (controls are removed from the video player), HD (embedded video is automatically set to HD), and muting. Combining query strings in the embed code is also covered. 

Loop

In this section, we'll show you how to edit an embed code to disable looping in its rendered video player.

• Identify a Streamable embed code that has looping activated. Copy it into a text document or code editor. 
• For this example, we'll be using the code below. The section of the code that we'll be changing is in white. 
  
  

      <div style="width: 100%; height: 0px; position:
      relative; padding-bottom: 56.250%;">
      <iframe src="https://streamable.com/e/ 5rneah"
      frameborder="0" width="100%" height="100%"   
      allowfullscreen style = "width: 100%; height: 100%;    
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• After the "h" that's in the section in white, type the following: ?loop=0

• loop=0 is the query string, and the question mark separates the query string from the URL.

• The new code should look like the following:
  
  

      <div style="width: 100%; height: 0px; position:
      relative;    padding-bottom: 56.250%;">
      <iframe src=
      "https://streamable.com/e/ 5rneah?loop=0"       
      frameborder="0" width="100%" height="100%"
      allowfullscreen style="width: 100%; height: 100%;    
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• When the new code is embedded, looping should be disabled in the resulting video player.

Autoplay

In this section, you'll learn how to edit an embed code in order to disable autoplay in the video player that the code generates.

• Identify a Streamable embed code that has autoplay activated. Copy it into a text document or code editor. 
• For this example, we'll be using the code below. The section of the code that we'll be changing is in white. 
  
  

      <div style="width: 100%; height: 0px; position:
      relative; padding-bottom: 56.250%;">
      <iframe src=
      "https://streamable.com/e/ 5rneah?autoplay=1"
      frameborder="0" width="100%" height="100%"
      allowfullscreen style="width: 100%; height: 100%;    
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• Replace the number one that's in the section in white with the following: 0

• autoplay=0 is the query string, and the question mark that's in front of it separates the query string from the URL.

• The new code should look like the following:
  
  

      <div style="width: 100%;height: 0px; position:
      relative; padding-bottom: 56.250%;">
      <iframe src=
      "https://streamable.com/e/ 5rneah?autoplay=0"
      frameborder="0" width="100%" height="100%"
      allowfullscreen style="width: 100%; height: 100%;    
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• When the new code is embedded, autoplay should be disabled in the resulting video player. 

No Controls

In this section, we'll show you how to edit an embed code to remove the controls from its rendered video player.

• Identify a Streamable embed code that has video player controls activated. Copy it into a text document or code editor. 
• For this example, we'll be using the code below. The section of the code that we'll be changing is in white. 
  
  

      <div style="width: 100%; height: 0px; position:
      relative; padding-bottom: 56.250%;"><iframe src=
      "https://streamable.com/e/ 5rneah"
      frameborder="0" width="100%" height="100%"
      allowfullscreen style="width: 100%; height: 100%;    
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• After the "h" that's in the section in white, type the following: ?nocontrols=1

• nocontrols=1 is the query string, and the question mark separates the query string from the URL.

• The new code should look like the following:
  
  

       <div style="width: 100%; height: 0px; position:
       relative; padding-bottom: 56.250%;"><iframe src=     
       "https://streamable.com/e/ 5rneah?nocontrols=1"
       frameborder="0" width="100%" height="100%"
       allowfullscreen style="width: 100%;height: 100%;     
       position: absolute; left: 0px; top: 0px; overflow:
       hidden;"></iframe></div>

• When the new code is embedded, video player controls should not be visible in the resulting player.

HD

Below you'll learn how to alter your embed code so that its rendered video player is automatically set to HD.

• Identify the Streamable embed code for the video that you'd like to be set to HD by default when embedded. Copy it into a text document or code editor. 
• For this example, we'll be using the code below. The section of the code that we'll be changing is in white.  
  
  

       <div style="width: 100%; height: 0px; position:
       relative; padding-bottom: 56.250%;"><iframe src=     
       "https://streamable.com/e/ 5rneah"
       frameborder="0" width="100%" height="100%"
       allowfullscreen style="width: 100%; height: 100%;     
       position: absolute; left: 0px; top: 0px; overflow:
       hidden;"></iframe></div>

• After the "h" that's in the section in white, type the following: ?hd=1
   
  • hd=1 is the query string, and the question mark separates the query string from the URL.
• The new code should look like the following:
  
  

      <div style="width: 100%; height: 0px; position:
      relative; padding-bottom: 56.250%;"><iframe src=    
      "https://streamable.com/e/ 5rneah?hd=1"
      frameborder="0" width="100%" height="100%"
      allowfullscreen style="width: 100%; height: 100%;
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• When the new code is embedded, the video player generated by the code should be set to HD by default.

Mute

Here we instruct you in how to edit your embed code so that the video player that the code generates is muted and has no volume button.

• Identify the Streamable embed code for the video that you'd like to have muted and devoid of a volume button when embedded. Copy it into a text document or code editor. 
• For this example, we'll be using the code below. The section of the code that we'll be changing is in white.  
  
  

       <div style="width: 100%; height: 0px; position:
       relative; padding-bottom: 56.250%;"><iframe src=    
       "https://streamable.com/e/ 5rneah"
       frameborder="0" width="100%" height="100%"
       allowfullscreen style="width: 100%; height: 100%;     
       position: absolute; left: 0px; top: 0px; overflow:
       hidden;"></iframe></div>

• After the "h" that's in the section in white, type the following: ?muted=1
  
  • muted=1 is the query string, and the question mark separates the query string from the URL.
• The new code should look like the following:
  
  

      <div style="width: 100%; height: 0px; position:
      relative; padding-bottom: 56.250%;"><iframe src=    
      "https://streamable.com/e/ 5rneah?muted=1"
      frameborder="0" width="100%" height="100%"
      allowfullscreen style="width: 100%; height: 100%;
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• When the new code is embedded, the video player generated by the code should be muted and have no volume button.

Combining Query Strings

Users can combine query strings by using an ampersand (&). In the example below, we combine loop=0 and nocontrols=1, which will disable looping and remove the controls from the video player.

• For this example, we'll be using the code below. The section of the code that we'll be changing is in white.  
  
  

      <div style="width: 100%; height: 0px; position:
      relative; padding-bottom: 56.250%;"><iframe src=
      "https://streamable.com/e/ 5rneah"
      frameborder="0" width="100%" height="100%"
      allowfullscreen style="width: 100%; height: 100%;    
      position: absolute; left: 0px; top: 0px; overflow:
      hidden;"></iframe></div>

• After the "h" in the white section, type the following: ?loop=0&nocontrols=1
  • loop=0 and nocontrols=1 are the query strings.
  • The question mark (?) separates the query strings from the URL.
  • The ampersand (&) connects the two query strings.
• The new code should look like the following:
  
  

  <div style="width: 100%; height: 0px; position:
  relative; padding-bottom: 56.250%;">
  <iframe src="https://streamable.com/e/ 5rneah?
  loop=0&nocontrols=1 " frameborder="0" width
  ="100%" height="100%" allowfullscreen style
  ="width: 100%; height: 100%; position:
  absolute; left: 0px; top: 0px; overflow:
  hidden;"></iframe></div>

• When the new code is embedded, loop should be disabled and the video player should have no controls.

Questions? Please visit our Support Center at streamableapp.zendesk.com for further assistance!