Commodity-TV
News
Swiss Resource Capital AG
Embedding Playlists
You can watch videos which are in a certain category listed. Through this feature several videos can be listed in one player and save space and/or makes sure various videos are displayed on the same website location. You find the overview of the categories here: https://www.commodity-tv.com/api/links/
Code examples
Latest: https://www.commodity-tv.com/embed/channel/
Popular: https://www.commodity-tv.com/embed/channel/popular/
Channel: https://www.commodity-tv.com/embed/channel/[CHANNELNAME]/
Companies: https://www.commodity-tv.com/embed/channel/[COMPANYNAME]/
Events: https://www.commodity-tv.com/embed/channel/[EVENTNAME]/Embed via iframe
Default iframe not responsive (not recommended)
<iframe width="640" height="480" src="https://www.commodity-tv.com/embed/channel/[CHANNELNAME]/" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe>Bootstrap (responsive)
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.commodity-tv.com/embed/channel/[CHANNELNAME]/" 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/channel/[CHANNELNAME]/" allow="autoplay; encrypted-media;" frameborder="0" allowfullscreen></iframe>
</div><style>
.embed-container {
position: relative;
padding-bottom: 75%; /* 4:3*/
/* padding-bottom: 56.25%; *//* 16:9*/
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',{
Channel: 'popular', //optional
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
hidePlaylist: 1, //default is 0
}
});
</script>Note: The integration via Javascript creates an iframe in the given div. The height of the iframe is calculated automatically based on the width and settings. 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/channel/[CHANNELNAME]/?[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. |
| hidePlaylist | Hide the playlist below the video. Supported values are 0 or 1. The default value is 0. |
Recommended 4:3 sizes in pixel
160 x 120
320 x 240
640 x 480
800 x 600
1024 x 768
1152 x 864Notes
It is possible to output a playlist without slider.
You have to change the paramter hidePlaylist=1 and the embedded iframe format to 16:9 (examples).
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
