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 wistia.com
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.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.

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:

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;

Enter fullscreen mode Exit fullscreen mode

10. Use it as a normal component:

<WistiaPlayer
            videoId="abcxyz123"
            wrapper="wistia-player-container-1"
          />
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.

Top comments (9)

Collapse
 
meldulcio profile image
Melchisedek Dulcio

For anywho who lands on this article trying to make Wistia work with their React code, you ought to give the react-player npm package a try. They have a config option that takes a wistia property that allows you to pass in the embed options, and I've found it works pretty well actually.

This article is none the less useful if you want to handle all that yourself, so thank you, @tanveermughal.

Collapse
 
joshmatthew profile image
Jay-Em

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

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

Collapse
 
joshmatthew profile image
Jay-Em

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

Collapse
 
ali_gohar_cd905f063e99700 profile image
Ali Gohar

thank you so much sir, this is very helpful

Collapse
 
ilyasazmi profile image
ilyasazmi

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

Collapse
 
mmudge profile image
Michael Mudge

Thank you! Super easy to follow and implement!

Collapse
 
yassir_ennazk_d2b2304cc8e profile image
Yassir Ennazk • Edited

Just use



<div
          dangerouslySetInnerHTML={{ __html: 'YOUR_WISTIA_EMBED_HTML_CODE' }}
/>

Enter fullscreen mode Exit fullscreen mode
Collapse
 
minhaj18_56 profile image
Minhaj Alvi

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