Video block

alert iconBe aware that this version of the video block has accessibility issues. The Web CMS Service team is working on resolving the problems and will release an updated version as soon as possible. Relatively speaking, this video offering is no better or worse than most on the web today, but an attempt will be made to create a fully accessible block.

Details

Description:

The Video block allows you to insert a video into a page. Clicking on the play button will launch a lightbox. The enclosing box contains social media sharing buttons.

Installation:

  1. Copy the video-block file into the Base Folder/_user-blocks/ folder on your site in the folder location of your choice.
  2. Click Edit, provide the required information. Click Submit to save.
  3. Edit the page where the video-block will appear. Attach the block and click Submit to save.

Customization:

By default the Video block is styled through the CMS' central files. You do have the option of adding your own CSS in a supplemental stylesheet.

How to create a Video block

The video block contains the following sections:

  • Video data
  • Video metadata
  • Image information
  • Other settings
  • Block settings
  • Style

Compressed video block showing each of its sections

Video > data

Video source to indicate url, height and width

  • Video source - Provide the URL where the video is hosted
  • Video dimensions - Indicate the width and height in whole numbers, excluding the “px” for pixels

Video > metadata

Includes information about date, title, blurb, source, description, credit, and length of video

  • Date - Provide the date you want associated with the video (either the date of the recording or perhaps the date you created the page)
  • Title - The title provided in this field will appear at the top of the video block
  • Blurb - Include any free-styled text (optional)
  • Source - Where the video is hosted (optional)
  • Description - Brief description of the video (optional)
  • Credit - Creator or owner of the video (optional)
  • Length of video - Enter hours, minutes and seconds as appropriate in either of these formats: 3 hrs 23 min 42 secs or 3:23:42 (optional)

Video > image information

Image information such as the poster image and alternative text

  • Post image file [search] - You can either manually create a poster image and upload it for use in your site, or
  • Or, poster image URL - provide an external URL to an existing image that can be used for a poster image
  • Alt text - For accessibility requirements and proper coding, if a poster image is used, please enter a one sentence descriptive sentence that describes the content of the image used

Note: An image poster is required, whether it’s custom made or hosted elsewhere on-line. The poster size should match the height and width dimensions entered above.

Video > other settings

Choose to display the video or not

  • Display? - If left unchecked, the video will not display. Check the box for it to appear on the page.


Video > block settings

Enter a code for languages other than English

  • Language code - If using a language other than English, you can enter the language code to assist in the proper display of special characters (optional)

How to attach a Video block

How to attach a block

  1. Browse to the location of your faq-block in the Base Folder/_user-blocks/ folder and click to choose and select Confirm to attach.
  2. Open the page that will display the block. Click Edit. Decide where on the page the FAQ should appear in relationship to the particular repeating content block to which you're attaching it.
  3. Select the desired width of the block on the page. 100% will result in the FAQ block filling the entire width of the available page space.
  4. If less than 100% you have the option of having the block appear on the left side or the right side with any text on the page wrapping around it.
  5. If you wish the block to appear without a border, check the box to remove it.
  6. Click Submit to save your changes.

Video Demo

The Mountain

Sunlight filtering through tree trunks

Filmed from April 4-11, 2011 from El Teide, Spain's tallest mountain

Video credit: Teso Photography
(3:09)

CSS Stylings

All blocks offered in the Content Library have a built-in hook to allow users to create custom stylings via the use of a supplemental style sheet. To date, the following classes have been created in conjunction with the available blocks:

  • Code block - class name: ._code-block
  • FAQ block - class name: ._faq1 (._faq-block)
  • Feature block - class name: ._feature-block
  • Jump menu block - class name: ._jumpmenu1
  • RSS block - class name: ._rssfeed1 (._rssfeed-block)
  • Slideshow block - class name: ._slideshow1 (._slideshow-block)
  • Title area links block - div id: #links
  • Video block - video2.css
  • XHTML Raw block - class name: ._xhtml-block