Embedding a video player can be tricky. In this guide we take you through two methods of embedding the StreamShark video player into your website.
Finding Your Embed Link
All of the methods used below, will reference your VOD/event embed link. This is found in the 'Overview' tab, under 'Player & Embed Codes'.
1.0 Embedding Just the Video Player
1.1 Static Method
For every live event and VOD, we provide a simple static embed code, which fixes the width and height at a static value.
You can change the 'width' and 'height' values to whatever you want, but make sure it matches the aspect ratio of your VOD/stream e.g. 16:9 e.g 1920x1080
<iframe width="640" height="360" src="https://play.streamshark.io/r/v/yourusername/zpcPqQqb/embed" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
1.2 Responsive Method
This method will expand the StreamShark video player to fill the surrounding container, whilst maintaining the desired aspect ratio (16:9 in most cases).
For the HTML code, we'll use the below snippet, make sure you replace the src URL with your unique embed link (as referenced at the start of this guide).
<iframe src="https://play.streamshark.io/r/v/yourusername/zpcPqQqb/embed" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen style="top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9; position: relative;"></iframe>
2.0 Responsively Embedding The Player + Chat
When you have a live event with chat enabled, you can choose to embed the video player and chat in a single iframe.
As the player + chat embed changes from horizontal to vertically stacked layout, depending on the page width, the embed code is slightly more complex.
Remember to replace the 'src' with the 'Player with Chat' embed link.
<style>
.streamshark-iframe {
top: 0;
left: 0;
width: 100%;
}
.small-streamshark-iframe {
aspect-ratio: 1/1;
}
.large-streamshark-iframe {
aspect-ratio: 2.37/1;
}
</style>
<iframe class="streamshark-iframe" src="https://play.streamshark.io/r/e/yourusername/zpcPqQqb/embedComment"
frameborder="0" allow="autoplay" allowfullscreen></iframe>
<script>
(function() {
function applyIframeStyles() {
const iframe = document.querySelector('.streamshark-iframe');
if (iframe) {
const isSmall = iframe.offsetWidth < 768;
iframe.classList.toggle('small-streamshark-iframe', isSmall);
iframe.classList.toggle('large-streamshark-iframe', !isSmall);
}
}
window.addEventListener('resize', applyIframeStyles);
applyIframeStyles();
})();
</script>
3.0 Responsively Embedding a Channel with Playlist
The code below will responsively maintain the correct aspect ratio of the channel + playlist embed.
Once again remember to replace the 'src' with your channel embed link
<style>
.ss-iframe {
top: 0;
left: 0;
width: 100%;
}
.ss-xxsmall { aspect-ratio: 0.745 / 1; }
.ss-xsmall { aspect-ratio: 0.8 / 1; }
.ss-small { aspect-ratio: 0.905 / 1; }
.ss-medium { aspect-ratio: 1.03 / 1; }
.ss-large { aspect-ratio: 2.75 / 1; }
</style>
<iframe class="ss-iframe" src="https://play.streamshark.io/r/cb/yourusername/zpcPqQqb?embed=true" frameborder="0" allow="autoplay" allowfullscreen></iframe>
<script>
function applyIframeStyles() {
const iframe = document.querySelector('.ss-iframe');
const width = iframe.offsetWidth;
const classNames = ['ss-xxsmall', 'ss-xsmall', 'ss-small', 'ss-medium', 'ss-large'];
iframe.classList.remove(...classNames);
if (width <= 500) iframe.classList.add('ss-xxsmall');
else if (width <= 576) iframe.classList.add('ss-xsmall');
else if (width <= 768) iframe.classList.add('ss-small');
else if (width <= 1000) iframe.classList.add('ss-medium');
else iframe.classList.add('ss-large');
}
applyIframeStyles();
window.addEventListener('resize', applyIframeStyles);
</script>