DEV Community

Cover image for Intergrating Wistia Video Player into your React App(complete code)
Tanveer Mughal
Tanveer Mughal

Posted on

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

**Blog Legend**
i. Need of Videos in modern website
ii. Significance of Wistia Player
iii. Creating Account at
iv. Uploading Video
v. Customizing Player and playback
vi. Copying Embed Code
vii. React Code
viii. Wrap up

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.

A snapshot of wistia player

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 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

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.

uploading video button screenshot

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.

screenshot of customization panel

4. Copy Embed Code:

Click on Embed & Share button to get embed code.

screenshot of embed code window

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

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 = `${videoId}.jsonp`;
    script1.async = true;
    const script2 = document.createElement("script");
    script2.src = "";
    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="${videoId}/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload=";" /></div></div></div></div>`;
    const container = document.getElementById(wrapper);

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

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

export default WistiaPlayer;

Enter fullscreen mode Exit fullscreen mode

10. Use it as a normal component:

Enter fullscreen mode Exit fullscreen mode

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.

Latest comments (6)

minhaj18_56 profile image
Minhaj Alvi

Can I upload video to Wistia from my React Js Application?

mmudge profile image
Michael Mudge

Thank you! Super easy to follow and implement!

ilyasazmi profile image

thanks for the code man.. the code works.. this works better than wistia on NPM

joshmatthew profile image

Very helpful. Thank you man! I have a question though, is wistia better than vimeo in this usecase?

tanveermughal profile image
Tanveer Mughal

Honestly, I have not used vimeo yet. I had to embed wistia player in one of my projects and I found that they have not clearly defined how one can embed their player in React, so I made a work-around and shared it here also for others to take benefit.

joshmatthew profile image

Anyway, there is a library called ReactPlayer, you can use that along remix-utils ClientOnly component. Just wrap the ReactPlayer component inside ClientOnly and you'll be good to go