youtube-embed

stablev1.0.0

Deferred loading for You Tube videos.

Overview

Use this component to initialize a placeholder that emulates a video player, and to defer loading the true player until said placeholder is clicked.



Usage

Dependencies

To get the youtube-embed utility working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
  3. Javascript
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/00-utilities/youtube-embed';

import youtubeEmbed from 'design-system/src/js/00-utilities/youtube-embed';

Basic code

The basic structure of this component is quite simple., you only need a div element with the class youtube-embed and a data-id attribute, used to specify the You tube video ID.

Additional configuration can be carried using modifiers and HTML attributes.

Once the markup is in place, you just need to call the imported youtubeEmbed function to initialize all the placeholders for the current document.

  1. HTML
  2. Pug
  3. Javascript
<div class="youtube-embed" data-id="dQw4w9WgXcQ" aria-hidden="true"></div>

.youtube-embed(data-id="dQw4w9WgXcQ", aria-hidden="true")

youtubeEmbed();

Modifiers

Add the following modifier to change the appearance/disposition of the video player.

50% width

Use this modifier to make the video player fill half of the parent container width.

  1. HTML
  2. Pug
<div class="youtube-embed youtube-embed--50" data-id="BTZl9KMjbrU" data-alt="Thom Yorke - Suspirium" aria-hidden="true">

.youtube-embed.youtube-embed--75(data-id='BTZl9KMjbrU', data-alt='Thom Yorke - Suspirium', aria-hidden="true")

75% width

Use this modifier to make the video player fill three quarters of the parent container width.

  1. HTML
  2. Pug
<div class="youtube-embed youtube-embed--75" data-id="s-yVQzCCRMs" data-alt="I love this company" aria-hidden="true">

.youtube-embed.youtube-embed--75(data-id='s-yVQzCCRMs', data-alt='I love this company', aria-hidden="true")

Float left

Float the player to the left.

Prince of Persia is a video game franchise created by Jordan Mechner, originally developed and published by Brøderbund, then The Learning Company, and currently Ubisoft. The franchise is built around a series of action-adventure games focused on various incarnations of the eponymous Iranian prince. The first game in the series was designed by Mechner after the success of his previous game with Brøderbund, Karateka. The original title spawned two sequels.

  1. HTML
  2. Pug
<div class="u-clearfix">
  <div class="youtube-embed youtube-embed--50 youtube-embed--left" data-id="gC3WEwSJoHs" data-alt="The Making of Prince Of Persia" aria-hidden="true">
  <p>Prince of Persia is a video game franchise created by Jordan Mechner, originally developed and published by Brøderbund, then The Learning Company, and currently Ubisoft. The franchise is built around a series of action-adventure games focused on various incarnations of the eponymous Iranian prince. The first game in the series was designed by Mechner after the success of his previous game with Brøderbund, Karateka. The original title spawned two sequels.</p>

.u-clearfix
  .youtube-embed.youtube-embed--50.youtube-embed--left(data-id='gC3WEwSJoHs', data-alt='The Making of Prince Of Persia', aria-hidden="true")
  p Prince of Persia is a video game franchise created by Jordan Mechner, originally developed and published by Brøderbund, then The Learning Company, and currently Ubisoft. The franchise is built around a series of action-adventure games focused on various incarnations of the eponymous Iranian prince. The first game in the series was designed by Mechner after the success of his previous game with Brøderbund, Karateka. The original title spawned two sequels.

Float right

Float the player to the right.

Prince of Persia is a video game franchise created by Jordan Mechner, originally developed and published by Brøderbund, then The Learning Company, and currently Ubisoft. The franchise is built around a series of action-adventure games focused on various incarnations of the eponymous Iranian prince. The first game in the series was designed by Mechner after the success of his previous game with Brøderbund, Karateka. The original title spawned two sequels.

  1. HTML
  2. Pug
<div class="u-clearfix">
  <div class="youtube-embed youtube-embed--50 youtube-embed--right" data-id="gC3WEwSJoHs" data-alt="The Making of Prince Of Persia" aria-hidden="true">
  <p>Prince of Persia is a video game franchise created by Jordan Mechner, originally developed and published by Brøderbund, then The Learning Company, and currently Ubisoft. The franchise is built around a series of action-adventure games focused on various incarnations of the eponymous Iranian prince. The first game in the series was designed by Mechner after the success of his previous game with Brøderbund, Karateka. The original title spawned two sequels.</p>

.u-clearfix
  .youtube-embed.youtube-embed--50.youtube-embed--right(data-id='gC3WEwSJoHs', data-alt='The Making of Prince Of Persia', aria-hidden="true")
  p Prince of Persia is a video game franchise created by Jordan Mechner, originally developed and published by Brøderbund, then The Learning Company, and currently Ubisoft. The franchise is built around a series of action-adventure games focused on various incarnations of the eponymous Iranian prince. The first game in the series was designed by Mechner after the success of his previous game with Brøderbund, Karateka. The original title spawned two sequels.

HTML attributes

The configuration of this component is done using these data attributes:

data-id

The ID of the You Tube video we want to embed.

data-alt

Used to specify the alt attribute for the generated placeholder image.