Other Videos

Twitter and Facebook have become an important source of video content. In April 2015, Facebook registered 4 billion daily views which grew to 8 billion in the space of just 6 months. In addition to YouTube, Xidipity supports embedding videos from these sources.

In addition to YouTube, other popular sources for video feeds are Twitter and Facebook. This post will walk you through how to include them in your content.

 

Twitter

Twitter offers two types of video clips, with the most popular being “GIF” files. The good news is, they are handled just like any other image file. The bad news is, there are no controls and they are always on.

 

Use Case

The use case for the Twitter GIF is reprint from the Google G Suite Blog about new features in Sheets.  The gif image is a step by step illustration on how to add print page breaks to a Google Sheets document.

 

TinyMCE Editor Screenshot

 

Installation

  1. GoTo tweet containing video
  2. Highlight and copy the link to the clipboard
  3. Open “EzGif” or similar app
  4. Paste link
  5. Click “Upload Video” button
  6. Verify “video to GIF” option is selected from menu bar
  7. Set the Start Time to “0”
  8. Set the End Time to “26”
    Video length (25) is shown under video + 1
  9. Size – “Original (up to 800px)
  10. Frame rate (FPS) – 10 (max 30 seconds)
    See step #8
  11. Method – Preserve transparency
  12. Click “Convert To GIF” button
  13. When file is converted click “Save”
  14. Name the file with a “.gif” extension
  15. Open WordPress Media Library
  16. Upload file
  17. Configure as desired
  18. Save

At this point going forward it is handled just like any other image from the media library. From a web design perspective, when it comes to this type of media less is more as too many gifs become more of a distraction and less of an asset.

 

The finished page can be viewed here.

 

Use Case

The second type of Twitter format is similar to Facebook with the exception the video is not placed in an “iframe” tag. It works well in full width as the the Jamboard product page illustrates.

 

TinyMCE Editor Screenshot

 

Installation

  1. Login to Twitter
  2. Search for and select “@gsuite”
  3. Scroll down to May 3rd (2018)
  4. Select the “Jamboard” tweet
  5. Click the “v” more caret and select “Embed Video” (screenshot)
  6. Highlight and copy the embed code to the clipboard
  7. Optional – remove script placeholder “•” from TinyMCE
    1. Open the Sandbox editor
    2. Paste contents
    3. Add ‘<p class=”mce:hidden”>’ just before the “<script … >” tag
    4. Add “</p>” just after the “</script>” end tag
    5. Highlight and copy sandbox to the clipboard
  8. GoTo the Content Page/Post
  9. Place the cursor at the top
  10. Click the editor “Insert ” menu dropdown
  11. Select “ Media”
  12. Select the “Embed” tab
  13. Paste clipboard content into the text box
  14. Click the “OK” button

Add content below the citation.

 

The finished page can be viewed here.

 

Facebook

In my mind Facebook movies are similar to YouTube with one very important difference – the aspect ratio. Where-as YouTube prefers a high definition 16:9 aspect ratio, Facebook prefers an aspect ratio which displays best on a smartphone in portrait mode. The problem with this approach is the video engulfs the viewable space on tablets and other large devices if displayed at full width. The work-a-round is to present the video in a half width format which keeps it restrained to a space it is comfortable with and does not impact the mobile experience. There is another usability issue on mobile I should point out. When the play button is press on mobile, Facebook expands the video to full screen. The only way to bring it back is to tap the screen a second time and deselect full screen.

 

In the TinyMCE editor, Facebook prefers referencing a video by citing it. Xidipity supports this method and includes it in the template. The disadvantage to this approach is the same as using poster images with the YouTube shortcode. To edit the video details requires using the editor in text mode.

 

Template

<blockquote class="web:hidden border-blue-dark" cite="video-page-link">
  <p class="icon-blue-dark fa-facebook-official"><span class="pl-2">Video Title</span></p>
  <cite><a href="video-author-link">Video Author</a></cite>
</blockquote>
<div class="video-alignment sm:mb-2">
  <div class="fb-container mce:hidden">
    <iframe>facebook-iframe-link</iframe>
  </div>
</div>

 

Design Notes

The template consists of the citation which is only displayed in the TinyMCE editor and the video which is only displayed on the web.

 

Use Case

For this use case I will pull a video from Facebook titled “Kitten Who Was The Runt Of Her Litter Is A Tiny Fighter” from the author “Little But Fierce”. To enhance usability on medium and large devices the video will be displayed in half screen format. The content of the use case comes from SPCA essay winner Beau Causey who is a 5th grade student at Pattie Elementary School, Dumfries VA.

 

TinyMCE Editor Screenshot

 

Installation

  1. Highlight template code above and copy to clipboard
  2. Open the Sandbox editor
  3. Paste clipboard into sandbox
  4. Retrieve Facebook Video data
    1. In new tab/window open Facebook video
      Warning, the video will autoplay.
  5. Highlight and copy the page URL to clipboard
  6. Return to Sandbox editor
  7. Replace “video-page-link” with the contents of clipboard
  8. Return to Facebook
  9. Right click the author link and copy the link address to clipboard
  10. Return to Sandbox editor
  11. Replace “video-author-link” with the contents of the clipboard
  12. Return to Facebook
  13. Below the video click “…” to the right of Share and select embed
  14. Highlight and copy video iframe (050 screenshot) to clipboard
  15. Return to Sandbox editor
  16. Replace “video-alignment” with “video-alignleft”
  17. Replace “<iframe>facebook-iframe-link</iframe>” with the contents of the clipboard 
  18. Highlight the updated template and copy to clipboard
  19. GoTo the Content Page/Post
  20. Place the cursor at the top
  21. Click the editor “Insert ” menu dropdown
  22. Select “ Media”
  23. Select the “Embed” tab
  24. Paste clipboard content into the text box
  25. Click the “OK” button

Add content below the citation.

 

The finished page can be viewed here.

 

Leave a Reply

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