1

I created a really small web component in which I have to play a video. I'm using a youtube video url to play the video inside component but it gives me the following error:

Refused to load media from 'https://www.youtube.com/watch?v=SLaWOkc3bC8' because it violates the following Content Security Policy directive: "media-src 'self' *.visualforce.com https://resourceful-wolf-s3e06s-dev-ed--c.documentforce.com blob:".

I added https://www.youtube.com to CSP trusted sites but the issue persisits.

below is the code:

HTML:

<template>
    <lightning-card title="Dark Phoenix Trailer">
        <video id="darkPhoenix" width ="200" height= "150">
            <source src="https://www.youtube.com/watch?v=SLaWOkc3bC8" type="video/mp4">
                Sorry, your browser does not support HTML5 video.
        </video>
        <div>
            <lightning-button variant="brand" label="Play Video" title="Play Video" onclick={playVideo} class="slds-m-left_x-small"></lightning-button>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement } from 'lwc';

export default class Gts_videoPlayer extends LightningElement {
    vid;
    renderedCallback(){
        this.vid = this.template.querySelector('video');
    }
    playVideo(){
        this.vid.play();

    }
}

Any help on fixing this? Also, can I use the same approach to play video from some other source?

Thanks

4

HTML5 Video tag requires specific format and youtube videos are not mp4 format always. Hence youtube never recommends to use this tag.They have built api to support embedding youtube videos.

Salesforce dev evangelist has already built one here using embed api and you can adopt the approach.

If you are interested in reading why using video tags may not be reliable approach for youtube videos, i suggest you read these answers.

Other simple approach is use iframe like below using the copy embed code that you can get for the video.

<template>
  <lightning-card title="Dark Phoenix Trailer">
        <iframe width="300" height="150" src="https://www.youtube.com/embed/SLaWOkc3bC8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </lightning-card>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.