Share#

The share button allows users to easily share the video by copying a link, sending it directly, or sharing via social media buttons. It also allows users to copy an embed link in an iframe format to insert on other websites.

The share button opens a modal window with pre-set options. This allows users to easily copy the link, send it, or create a post via social media buttons. It also allows users to copy the embed link to the video and insert it on any other website pasting <iframe> into the HTML.

Share modal window#

The share modal window with buttons and inputs is opened by triggering sharing:open, and closed by triggering modalclose or beforemodalclose events. On opening the the share modal will trigger sharing:opened and on closing the modal window will trigger sharing:close or sharing:closed events.

Options#

Options that Share component may receive:

{
  addButtonToControlBar?: boolean;
  buttonPositionIndex?: number;
  description?: string;
  embedCode?: string;
  fbAppId?: string;
  image?: string;
  mobileVerification?: boolean;
  redirectUri?: string;
  showEmbedCode?: boolean;
  socials?: ('viber'
  | 'reddit'
  | 'facebook'
  | 'messenger'
  | 'linkedin'
  | 'telegram'
  | 'twitter'
  | 'whatsapp'
  | 'email'
  | 'pinterest')[];
  title?: string;
  url?: string;
}

Option Descriptions#

• url: The URL to be shared across social media platforms. By default, this is set to the current page URL.
• showEmbedCode: Enables the display of an input field with the embed code for the video.
• embedCode: Allows setting a custom iframe HTML snippet for embedding. If not provided, a default iframe code is generated based on the url:

  <iframe src='${url}' width='560' height='315' allowfullscreen></iframe>
  

• fbAppId: The Facebook App ID, required to fully integrate with Facebook sharing.
• redirectUri: The URI Facebook will redirect to after sharing, defaulting to ${url}#close_window.
• mobileVerification: When set to true, filters out certain social platforms (whatsapp, viber, messenger) on non-mobile devices, ensuring these mobile-specific apps are only shown on mobile.
• socials: An array of enabled social platforms. Supported values include email, linkedin, messenger, reddit, telegram, twitter, viber, whatsapp, and facebook. This option allows for fine-grained control over which platforms are shown.
• image: A URL pointing to the image displayed in social media link previews.
• title: A string title used in social media link previews.
• description: A description of the content being shared, used for social media link previews.

Example usage#

const player = window.kwikMotion('my-video', {
  shareOptions: {
    description: 'It is an implementation of the share button plugin on video.js framework',
    fbAppId: '123123123123',
    image: 'https://dummyimage.com/1200x630',
    mobileVerification: true,
    redirectUri: 'https://www.whitepeaks.co.uk/en/#close',
    showEmbedCode: true,
    socials: [
      'email',
      'linkedin',
      'messenger',
      'reddit',
      'telegram',
      'twitter',
      'viber',
      'whatsapp',
      'facebook'
    ],
    title: 'videojs-share component',
    url: 'https://www.whitepeaks.co.uk/en/'
  }
})