Tip of the week # 205

Lightning Web Component with Youtube Controls.

Description : Code snapshot for Lightning Web Component with Youtube Controls.

---

• YoutubePlayback.html

  
      
  <template>
      <lightning-card title="Experiment Videos" icon-name="utility:video">
          <div class="slds-grid slds-wrap slds-gutters slds-p-around_medium">
              <div class="slds-col video-section">
                  <div class="slds-m-top_medium slds-grid slds-grid--align-center video-container">
                      <iframe class="video-frame" style="width:51%;height:401px;" src={selectedVideoUrl} frameborder="0" allow="autoplay" allowfullscreen></iframe>
                  </div>
                   <div class="slds-m-top_medium slds-grid slds-grid--align-center player-container">
                      <lightning-button-icon
                          icon-name="utility:play"
                          alternative-text="Play"
                          variant="brand"
                          class="play slds-m-around_medium"
                          onclick={handlePlay}>
                      </lightning-button-icon>
  
                      <lightning-button-icon
                          icon-name="utility:pause"
                          alternative-text="Pause"
                          variant="brand"
                          class="pause slds-m-around_medium"
                          onclick={handlePause}>
                      </lightning-button-icon>
  
                      <lightning-button-icon
                          icon-name="utility:refresh"
                          alternative-text="Stop"
                          variant="destructive"
                          class="stop slds-m-around_medium"
                          onclick={handleRestart}>
                      </lightning-button-icon>
                  <lightning-input class="slds-m-around_medium message-toggle-inactive" type="toggle" label="Subtitles/Caption" checked={subtitlesEnabled} onchange={toggleSubtitles}></lightning-input>
                  <div class="controls slds-m-around_medium">
                      <lightning-slider variant="label-hidden" min="0" max="100" step="1" value={volume} onchange={handleVolumeChange}></lightning-slider>
                  </div>
                  <div class="controls slds-m-around_medium">
                      <lightning-combobox
                          name="speed"
                          variant="label-hidden"
                          label="Playback Speed"
                          value={playbackSpeed}
                          options={playbackSpeedOptions}
                          onchange={handleSpeedChange}
                      ></lightning-combobox>
                  </div>
              </div>
              </div>
          </div>
      </lightning-card>
  </template>
  
  
  
  

• YoutubePlayback.js

  
      
  import { LightningElement } from 'lwc';
  import { ShowToastEvent } from 'lightning/platformShowToastEvent';
  
  export default class YoutubePlayback extends LightningElement {
      iframeElement = null;
      playerReady = false;
      volume = 100;
      playbackSpeed =1;
      playbackSpeedOptions = [
          { label: '0.5x', value:0.5},
          { label: '1x', value:1},
          { label: '1.5x', value:1.5},
          { label: '2x', value:2}
      ];
      subtitlesEnabled = true;
  
      get selectedVideoUrl() {
          return this.selectedVideo='https://www.youtube.com/embed/NeXIV-wMVUk?autoplay=1&enablejsapi=1&controls=0&cc_load_policy=1&cc_lang_pref=en';
      }
  
      renderedCallback() {
          this.iframeElement = this.template.querySelector('iframe');
          if (this.iframeElement) {
              this.playerReady = true;
          }
      }
  
      sendCommand(command, args = []) {
          if (this.iframeElement && this.playerReady) {
              const message = JSON.stringify({ event: "command", func: command, args });
              this.iframeElement.contentWindow.postMessage(message, "*");
          } else {
              this.showToast('Error', 'Video player not ready', 'error');
          }
      }
  
      handlePlay() {
          this.sendCommand("playVideo");
      }
  
      handlePause() {
          this.sendCommand("pauseVideo");
      }
  
      handleRestart() {
          this.sendCommand("seekTo", [0, true]);
          setTimeout(() => this.sendCommand("playVideo"), 500);
      }
  
      showTooltip() {
          this.isTooltipVisible = true;
      }
  
      hideTooltip() {
          this.isTooltipVisible = false;
      }
  
      showToast(title, message, variant) {
          this.dispatchEvent(new ShowToastEvent({ title, message, variant }));
      }
      handleVolumeChange(event) {
          this.volume = event.target.value;
          this.sendCommand("setVolume", [this.volume]);
      }
  
      handleSpeedChange(event) {
          this.playbackSpeed = Number(event.target.value);
          console.log(this.playbackSpeed);
          this.sendCommand("setPlaybackRate", [this.playbackSpeed]);
      }
      toggleSubtitles() {
          this.subtitlesEnabled = !this.subtitlesEnabled;
          this.sendCommand("setOption", ["captions", "track", this.subtitlesEnabled ? { languageCode: "en" } : {}]);
      }
  }
  
  
  
  

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

• Output of Code

  

Note : Styling hooks are constructed using CSS custom properties. (also referred to as CSS variables or cascading variables.

Happy Sharing...

Everyone has their own favorites, so please feel free to share with yours contacts and comments below for any type of help!

Use below Chrome Extension for Productivity and share your feedback. Download Link : https://chromewebstore.google.com/detail/quick-shortcuts/ldodfklenhficdgllchmlcldbpeidifp?utm_source=ext_app_menu