**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.
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.
Top comments (9)
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 awistia
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.
Very helpful. Thank you man! I have a question though, is wistia better than vimeo in this usecase?
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.
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
thank you so much sir, this is very helpful
thanks for the code man.. the code works.. this works better than wistia on NPM
Thank you! Super easy to follow and implement!
Just use
Can I upload video to Wistia from my React Js Application?