@asemirsk/youtube v3.0.0

YouTube Component

The YouTube Component can be used to place a YouTube video on a page via the BodilessJS edit interface. The YouTube Component is responsive and features a 16:9 ratio by default.

Content Editor Details

To add a YouTube Component to your site:

1. In Edit Mode, select the YouTube Component from the Component Library.
   

2. Click on your newly added YouTube Component, and, within its context menu, under "YouTube," click Settings.
   

3. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.

   • Share (e.g., https://youtu.be/_LBdqpscwi0)
   • Watch (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)
   • Embed (e.g., https://www.youtube.com/embed/_LBdqpscwi0)

4. Resize or reposition the YouTube Component using the Flow Container controls.

Site Builder Details

The YouTube Component can be used to place a YouTube video on a page via the BodilessJS edit interface.

?> Please note that the Embed Component must be activated on your site for the YouTube Component to work.

  import { YouTube } from '@bodiless/youtube';

  <YouTube nodeKey="youtube" />

You can also use the HOC version of this which can then be applied to other components. But the underlining component must accept the same props as an iframe tag. Simply pass the node key to the asBodilessYouTube function and then use the returned HOC

import { CustomYouTube } from 'my-library';
import { asBodilessYouTube } from '@bodiless/youtube';

const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);

<YouTube />

You can configure YouTube player settings leveraging withYouTubePlayerSettings HOC. For example, to configure AutoPlay for the YouTube component:

import { YouTube } from '@bodiless/youtube';

const AutoPlayYouTube = withYouTubePlayerSettings({
  autoplay: true,
  mute: true,
})(YouTube);

<AutoPlayYouTube nodeKey="youtube" />

Props

In addition, you can pass HTMLIFrameElement props (id, src, width, etc.). Check HTMLIFrameElement type for more details.

playerSettings Parameters

The YouTube Component utilizes an API that allows you to change the following properties/parameters. You can use defaultPlayerSettings to set parameters that are commonly used together. For more details on each individual parameter see YouTube Player API Reference for iframe Embeds.

e.g.: Responsive YouTube with 16:9 ratio with custom language preferences:

const withCustomLangPref = flowRight(
  withYouTubePlayerSettings({
    ...defaultPlayerSettings,
    cc_lang_pref: 'de',
    cc_load_policy: 1,
  }),
  addProps({
    src: 'https://www.youtube.com/embed/9No-FiEInLA',
  }),
);

const YouTubeWithCustomLangPref = withDesign({
  Item: withCustomLangPref,
})(DefaultReponsive16By9YouTube);

Usage

<YouTubeWithCustomLangPref nodeKey="withLangPref" />

Architectural Details

The YouTube Component renders the following code:

<iframe id="player" type="text/html" 
  src=""
  frameborder="0">
</iframe>

?> There are optional parameters on the src that are configurable.