YouTube Video

Xidipity WordPress Theme YouTube Video Tutorial
The Lego Ninjago Movie • 2017 • Warner Bros. Pictures

 

lesson

 

Add a YouTube video to a post using the Xidipity template.

 

Design Notes

The above template displays a full width YouTube video with a caption. Other YouTube templates are available as follows.

 

 

Template

 


GitHub Gist

video / youtube / full width / caption


 

Required Information

  1. Name Of Video: Introducing Google Gnome
  2. Source Link: https://www.youtube.com/watch?v=vNOllWX-2aE
  3. Caption text: Introducing Google Gnome

 

These instructions assume the YouTube web link above will be used and not the YouTube app.

 

Installation

  1. Highlight  & copy template to clipboard
  2. Open sandbox editor & paste clipboard
  3. Go to YouTube source link
  4. Click the “SHARE” link below video
  5. Click the “Embed” link
  6. Click the “Copy” link
  7. On line 10, replace “iFRAME” with clipboard
  8. On line 11, replace “CAPTION” with caption text
  9. Highlight updated template & copy to clipboard
  10. Place cursor where video will be embedded
  11. Click the embed ( save_alt ) button
  12. Paste the updated clipboard content into the text box
  13. Click the “OK” button

 

demonstration

 

Editor View

 


Video

video / youtube / full width / caption


 

Web View

 


Video

video / youtube / full width / caption

Introducing Google Gnome


 

youtube full screen

 

Lesson

Link to a youtube video in fullscreen mode. The thumbnail image is an image of your creation or choosing. I find an image with a 21×9 aspect ratio works well.

 

Template

 


GitHub Gist

video / youtube / full screen


 

Installation

  1. Highlight  & copy template to clipboard
  2. Open sandbox editor & paste clipboard
  3. Go to YouTube source link
  4. Click the “SHARE” link below video
  5. Highlight and copy video id  “vNOllWX-2aE
  6. On line 1, replace “VIDEO-ID” with “vNOllWX-2aE
  7. Highlight updated template & copy to clipboard
  8. Click the video thumbnail
  9. Click (  ) insert link button
  10. Paste link
  11. Press <return> or click the ( ↲) button

 

demonstration

 

Editor & Web View

 

½×

Xidipity Google Gnome

 

Click thumbnail image to view fullscreen video.