Embedding Video

The Embedding function enables you to publish our videos outside the our Commodity-TV website and to use the content directly on your website. You can embed a video in your Blog too and viewers can watch it without first going onto Commodity-TV. 

To receive the embedding code for a video, please go to the respective video on the website and click the button „Embed“. All videos can be found through the search function.

Code example

https://www.commodity-tv.com/embed/watch&v=[VIDEO_ID]

Embed via iframe

Default iframe not responsive (not recommended) 

<iframe width="640" height="360" src="https://www.commodity-tv.com/embed/watch&v=[VIDEO_ID]" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe>

Bootstrap (responsive) 

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.commodity-tv.com/embed/watch&v=[VIDEO_ID]" allow="autoplay; encrypted-media;" frameborder="0" allowfullscreen></iframe>
</div>

Example with additional CSS (responsive) 

<div class="embed-container">
  <iframe class="embed-responsive-item" src="https://www.commodity-tv.com/embed/watch&v=[VIDEO_ID]" allow="autoplay; encrypted-media;" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; /* 16:9 */
  /* padding-bottom: 75%; *//* 4:3 */
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
</style>

Embed via JavaScript

<script src="https://www.commodity-tv.com/ctvplayer.js"></script>	
<div id="your_id"></div>
<script>
  ctv = new ctvPlayer('your_id',{
    videoId: 1919, //required [VIDEO_ID]
    width: 960,  //optional in px, default is 640
    height: 540, //not required see notes below but optional in px, default if no width is 360
    addClass: 'embed-responsive-item', //optional inserts a certain class, useful for responsive settings
    //optional options
    options: {
      autoplay: 1 //default is 0
    }
  });
</script>

Notes: The integration via Javascript creates an iframe in the given div. The height of the iframe is calculated automatically in 16:9 based on the width. For a responsive implementation you can add your own class to the iframe with 'addClass'.

Additional parameter

The following parameters are available and optional.

https://www.commodity-tv.com/embed/watch&v=[VIDEO_ID]?[PARAMETER]
Parameter Info
autoplay This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are 0 or 1. The default value is 0.

Recommended 16:9 sizes in pixel

640 x 360
854 x 480
960 x 540
1024 x 576
1280 x 720
1366 x 768
1600 x 900
1920 x 1080