YouTube Videos

There was a time attaching a picture to your content was enough to entice viewers. While images have the potential to enhance your message, videos have a much greater capacity of reaching today’s media driven culture. It also appears consumers appreciate video content more, in particular when it stems from engaging content that spurs conversations and shares.

Video on the web has grown to be more than entertainment. It has become a critical component to getting the message out in business, politics, social media and music. In today’s world we rely on video to market and sell products, promote new ideas, and share beliefs. Evidence to these facts can be found in the use of video in training events like Google I/O, live stream events like SpaceX rocket launches,  Facebook, Snapchat, and Twitter video clips, and the popularity of YouTube.

 

Getting videos to display properly in WordPress can be a little tricky.  WordPress support indicates YouTube videos my be embedded by simply copying and pasting the link. I found the results limiting and unreliable. Embedding the “iframe” doesn’t work either as the “iframe” control doesn’t adjust to the available space. The method Xidipity uses is the “YouTube” shortcode. This method has been enhanced and supports embedding videos at full and half widths. Optionally, the video poster image can be displayed in the TinyMCE editor.

 

Shortcode Without Poster

This is the simplest method of using the shortcode and the only drawback is the poster image is not displayed in the editor. View the screenshot below to see how it looks.

 

TinyMCE Editor Screenshot

 

Template

<div class="mce:embedded-container">[youtube pos="?" src="video-id" args="?" capt="?"][/youtube]</div>

 

Design Notes

The shortcode is wrapped in an optional container to make it easier to see in your content. If desired, the “<div class=…>” and “</div>” can be omitted. The shortcode has the following attributes.

  1. pos – Optional video placement
    1. L – half width left
    2. C – full width centered (default)
    3. R – half width right
  2. src – Required YouTube video id
  3. args – Optional YouTube play options
  4. capt – Optional Caption

 

Use Case

This use case is an abbreviated Pixel 2 review published by the Verge updated on October 30, 2017. It contains a centered Google promo video and a left review and right unboxing videos by Marques Brownlee

 

The finished page can be viewed here.

 

Installation

Center Video
  1. Highlight template code above and copy to clipboard
  2. Open the Sandbox editor
  3. Paste clipboard into sandbox
  4. Retrieve Video ID
    1. In new tab/window open YouTube video

      The video link above might autoplay.

  5. Click share
  6. Copy video id (screenshot)
  7. Return to Sandbox editor
  8. Set parameters
    1. p = “c”
    2. src = “zpLVsR8cSFo” from YouTube
    3. args = “?rel=0”
    4. capt =”Introduction”
  9. Highlight the updated template and copy to clipboard
  10. Place the cursor at the top of the page
  11. Click the editor “Insert ” menu dropdown
  12. Select “ Media”
  13. Select the “Embed” tab
  14. Paste clipboard content into the text box
  15. Click the “OK” button

 

The installation of the left and right videos is a repeat of the centered with the following changes.

 

Left Video

 

[youtube pos="l" src="KvNis_A6UaI" args="?rel=0" capt="Review"][/youtube]

 

Right Video

 

[youtube pos="r" src="a-9IZz8Ry5I" args="?rel=0" capt="Unboxing"][/youtube]

 

I find the left and right shortcode options work best when placed at the beginning of a paragraph.

 

Shortcode With Poster

For those who would like to see the poster image displayed in the TinyMCE editor the following template will accomplish that goal.

 

Template

<div class="web:hidden"><img class="w-full" src="https://img.youtube.com/vi/youtube-id/sddefault.jpg" width="1280" height="720" /></div>
<div class="mce:hidden">[youtube pos="?" src="youtube-id" args="?" capt="?"][/youtube]</div>

 

Design Notes

The two changes to the template include the addition of the poster url and hiding the shortcode. Hiding the shortcode doesn’t mean it can not be edited, just the editor will have to be switched to text mode to do it.  Installation is the same as without the poster image with the exception the “youtube-id” will need to be added to the image url. 

 

TinyMCE Editor Screenshot

 

The YouTube shortcode produces the same result whether the poster option is used or not. The shortcode also works with the two column and the linked image gallery templates. 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *