Intergrating Wistia Video Player into your React App(complete code)

In today's digital age, video content has become an integral part of modern websites. With the rise of online video platforms and the widespread availability of high-speed internet, users expect to be able to watch videos seamlessly on the web. As a result, incorporating video players on websites has become crucial for businesses and content creators looking to engage their audience and increase their online visibility.

Wistia player is a popular choice for embedding videos into websites due to its sleek and professional design, easy setup process, and a wide range of customization options. With features such as video analytics, customizable player controls, and integrations with other marketing tools, Wistia offers a comprehensive solution for businesses and content creators looking to enhance their online video presence.

I recently planned to use wistia player in one of my projects. Previously, Wistia had a library specifically for embedding their player into React websites. However, that library has been deprecated, and users who want to embed Wistia players into their React sites now have to go through some additional setup steps. But don't worry, because I have a solution that's almost as easy as copy-and-paste. I'll provide you with easy steps and a code snippet that you can use to embed Wistia player into your React website without any hassle.

1. Create Account at wistia.com:

Wistia is not entirely free but they offer a free package in which you can embed 10 videos for free in one or more websites. To create an account you can sign up using your Google or Microsoft account or by email.

2. Uploading Video on wistia.com:

After successful creation of account, you will be redirected to your dashboard where you can manage your videos. Click on New button and then choose video adding option that suits you.

3. Customize player, playback options and edit video if required:

After uploading the video click on the video and you'll be brought to a panel where you have options to customize the look(color, controls etc) of the player and also the playback options. You can also edit the video by click on 'edit' button.

4. Copy Embed Code:

Click on Embed & Share button to get embed code.

This code contains a 'key' to your video. You can find it in the given link in embed code:

wistia.com/embed/medias/e0o4vq1ih5.jsonp

5. Embed in website:

Below is a react component which recieves 'videoId' and 'wrapper' as props and render specific video referring to that specific video id. Wrapper in just an 'html id attribute' for the div which will wrap the player. I made it dynamic so that if you want to embed more than one video on a single page you just have to give a unique wrapper name to each instance of wistia player.

import React, { useEffect } from "react";

function WistiaPlayer({ videoId, wrapper }) {
  useEffect(() => {
    // Wistia embed code
    const script1 = document.createElement("script");
    script1.src = `https://fast.wistia.com/embed/medias/${videoId}.jsonp`;
    script1.async = true;
    const script2 = document.createElement("script");
    script2.src = "https://fast.wistia.com/assets/external/E-v1.js";
    script2.async = true;
    const div = document.createElement("div");
    div.innerHTML = `<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_${videoId} seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/${videoId}/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>`;
    const container = document.getElementById(wrapper);
    container.appendChild(script1);
    container.appendChild(script2);
    container.appendChild(div);

    return () => {
      // Cleanup code
      container.innerHTML = "";
    };
  }, []);

  return <div id={`${wrapper}`}></div>;
}

export default WistiaPlayer;

10. Use it as a normal component:

<WistiaPlayer
            videoId="abcxyz123"
            wrapper="wistia-player-container-1"
          />

Code Explaination:

As I have already mentioned that I planned to use wistia player into one of my projects but when I found out that it's react library has been deprecated, I searched internet if someone had shared newer way of embedding but I found nothing in this regard. So when I found out the solution, I decided to share it with others as early as possible so they wont get stuck in this issue disturbing the pace of their project work. For the time being I am leaving it here but I'll surely get back and update this blog with step by step explaination of the code. This technique will help you embed any other components to your react site which are available in a form like wistia player embed code.