How to Play YouTube Video In Salesforce Lightning Component

Lightning Component

Today, in this post we are going to learn how to Play YouTube videos in salesforce lightning component.

We can play video file in lightning component by 2 ways :

  • From Static Resources.
  • Play Video File Using iFrame Tag.

Play Video File from Static Resource In lightning component

Play YouTube Video Files Using iFrame Tag-:

As we know In lightning Component Object and embed tag has no longer supported. But We can play video files from YouTube by using iframe tag.

To play a video from YouTube you have need to use embed URL

Follow below steps to get embed URL of YouTube video :

  1. Go to the YouTube video you want to embed.
  2. Under the video, click Share .
  3. Click Embed.
  4. From the box that appears, copy the HTML code.

YouTube video in salesforce lightning component

videoDemo.cmp [Lightning Component]

demo.app [Lightning Application]

Output-:

 

YouTube video in salesforce lightning component

Tips :
  • Always use Embed URL to play YouTube Videos In lightning Component. Otherwise you have get an error in console log. : “Refused to display ‘https://www.youtube.com/watch?v=aadssddqrsI’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

 

  • You can specify the dimension of the player by Using the width and height attributes.
  • You can have your video start playing automatically when lightning component loading by adding a simple parameter autoplay=1 OR autoplay=0 to your YouTube embed URL.

 i.e https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1

here value 0 means video NOT play automatically (Default) and value 1 means video play automatically.

  • You can also show or hide the YouTube controllers [such as play,pause buttons..] by by adding a simple parameter controls=1 (default/show) OR controls=0 to your YouTube embed URL.

 i.e https://www.youtube.com/embed/XGSy3_Czz8k?controls=1

Some Useful Resources : 

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂

(Visited 2,548 times, 7 visits today)

Leave a Reply