How To Play Video In LWC

Hello Guys,

Today in this post we are going to learn about HOW TO PLAY YOUTUBE VIDEO OR MP4 VIDEO IN LIGHTNING WEB COMPONENT. You can play this video at Home Page Or Any Salesforce Page.

In This Post we are using iframe Tag for playing any video in salesforce page.we just simply paste video url into input box and video will be shown.

Let's Quickly Get Started.

Step 1 : lwcVideoPlayer.Html

<template>
     <lightning-card title="LWC Video Player">
         <div class="slds-m-around_small">
<div>
         <lightning-input type="text" label="Video Url" onchange={fetchVideoUrl} class="slds-m-bottom_small"></lightning-input>
</div>
<div>&nbsp; &nbsp; </div>
<template if:true={showVideoPlayer}>
<div>
        <iframe width="500px" height="300px" src={url} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
</div>
</template>
         </div>
        </lightning-card>
</template>

Step 2 : lwcVideoPlayer.js

import { LightningElement } from 'lwc';
export default class LwcVideoPlayer extends LightningElement {
    url = '';
    showVideoPlayer = false;
    fetchVideoUrl(event){
        let baseUrl = 'https://www.youtube.com/embed/';
        let urlValue = event.target.value;
        if(urlValue != ''){
             this.showVideoPlayer = true;
        }
        else {
            this.showVideoPlayer = false;
        }
        this.url = urlValue;
        let videoId = '';
        if(urlValue.includes('youtube') && urlValue.includes('v=')){
videoId = urlValue.split('v=')[1];
   
         if(videoId != ''){
          baseUrl = baseUrl + videoId;
        }
        this.url = baseUrl;
         
    }
    }

}

Step 3 : lwcVideoPlayer.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
   <isExposed>true</isExposed>
    <targets>

        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        
    </targets>
</LightningComponentBundle>

Output : -

If You have any doubt Or suggestion related this post then please comment us and share your opinion with us. We respect your opinion .

I hope you Liked it.