How to add Custom Cover image while embed

[Ashish_Jangra]

Hey Team,

We want to add a custom cover image while embeding twitch video to a external website. When someone click on that cover twitch video should play.

Also is there any option to customizing the play icon.

[BarryCarlyon]

You cannot customise the embed

But I guess you can show an image and on click replace the image with the embed instead

[Ashish_Jangra]

@BarryCarlyon Thank you for your response. Is there any example or documentation i can refer for image on click show and play twitch video?

[BarryCarlyon]

it’s just basic html/js so no

So instead of

    <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat",
        // Only needed if this page is going to be embedded on other websites
        parent: ["embed.example.com", "othersite.example.com"]
      });
    </script>

it’s something like

    <div id="twitch-embed">
        <img src="myimage" />
    </div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
document.getElememById('twitch-embed').addEventListener('click', (e) => {
    document.getElememById('twitch-embed').textContent = '';
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat",
        // Only needed if this page is going to be embedded on other websites
        parent: ["embed.example.com", "othersite.example.com"]
      });
});
    </script>

You just build the embed when a user clicks on an element instead of building the embed at page load