Adding a video with the Rhythm Video structure and template

  1. In the navigation pane, expand the menu under the name of the site.
  2. Select Content & Data > Web Content.
  3. Select Add > Rhythm Video Content.
  4. In the Title field, specify a name for the content in the default language. To specify a name in a different language, click the flag button and select the language.
  5. Specify basic information about the video:
    Structure
    Accept the default value of Rhythm Video Content.
    Template
    Accept the default value of Rhythm Video Template.
    Title
    Specify a title for the image.
    Image
    If the image is stored locally, click the Browse button and select the image to use as the primary image. To use an image that you have already uploaded to documents and media, leave this field blank.
    Image from Documents and Media
    If the image is stored in documents and media, click the Select button to select the image. To use an image from documents and media, ensure that you leave the Image field blank.
  6. Specify the image to use as the primary image. Complete one of these steps:
    • To upload an image from a local file system, click the Browse button next to the Image field and select the image.
    • To use an image that has been uploaded in the Documents and Media form, click the Select button. Ensure that you leave the Image field blank.
  7. In the Hover Options section, specify the actions to take when a user places the cursor over the image:
    Image on Hover
    To display a different image, select the Image on Hover check box. Then, select the image to display. Ensure that the image that you select is the same height and width as the main image. Otherwise, the image is not displayed correctly.

    To display an image that is stored locally, click the Browse button next to the On Hover Image field. To display an image that is stored in documents and media, click the Select button. If you select an image from documents and media, ensure that you leave the On Hover Image field blank.

    Zoom on hover
    Select this check box to zoom into or out of the image when a user places the cursor over the image. In the Zoom percentage field, specify the zoom level. To magnify the image, specify a value over 1. For example, 1.2 zooms in by 20%. To decrease the size of the image, specify a value less than one. For example, 0.8 decreases the size of the image by 20%.
    Content on Hover
    Select this check box to display alternate content when the cursor is placed over the image.
    Overlay on Hover
    Select this check box to display a color over the image when a user places the cursor on the image. Specify the color in the Hover Overlay Color field. You can specify a hex code or the name of a color. In the Hover Opacity Percentage field, specify the opacity. You can specify a value up to 1. For example, to specify 60% opacity, enter 0.6.
    Image Overlay
    Select this check box to display a color over the image. The color is removed when the user places the cursor on the image. Specify the color in the Image Overlay Color field. You can specify a hex code or the name of a color. In the Hover Opacity Percentage field, specify the opacity.
  8. In the Optional Text section, specify text to place on the image:
    Heading
    Specify heading text.
    Heading Text Color
    Specify the color of the heading text. You can use a hex code or specify the name of the color.
    Description
    Specify a description. This text is placed under the heading.
    Description Text Color
    Specify the color of the description text. You can use a hex code or specify the name of the color.
    Text Position
    Click the arrow and select how to position the text over the image.
    Text Overlay
    Select this check box to display the text as an overlay that is removed when the user places the cursor over the image. Clear the check box to always display the text over the image. If you select the check box, specify the color of the overlay in the Text Overlay Color field and the opacity percentage in the Text Opacity Percentage field.
  9. In the Links & Buttons section, specify links to include on the image:
    Link to Page
    To link to another page on your website, specify the page in this field. Use the Link Type field to specify the style of the link, and specify the text to use for the link in the Link Text field.
    External Link URL
    To link to a page that is not a part of your website, specify the URL in this field. Use the External Link Type to specify the style of the link, and specify the text to use for the link in the External Link Text field.
    Link Color
    Specify the color of the link. The color that you specify is applied to internal and external links. You can specify a hex code or the name of the color.
    Button Link
    To use a button to add a link to another page in your website, specify the name of the page in this field. Use the Button Type field to specify the style of the button, and specify the text to use for the button in the Button Text field.
    Lightbox Redirect
    Select this check box to redirect users to a lightbox when they click the image. To redirect to an internal page, specify the name of the page in the Lightbox Local Link field. To redirect to an external page, specify the link in the Lightbox External Link field. Specify information about the appearances of the lightbox in these fields:
    • Lightbox Overlay Color. Specify the color to use for lightbox.
    • Lightbox Opacity Percentage. Specify the percentage of opacity. Specify a value up to 1. For example, to specify 50% opacity, enter 0.5.
    • Lightbox Icon Color. Specify the color of the lightbox icon.
  10. Use the Remove Portlet Spacing check box to specify how the image is displayed when it is placed over multiple columns. Select the Remove Portlet Spacing check box to remove the spacing between columns. When you select the check box, the image spans the columns. Clear this check box to place the image within a single column.
  11. Specify the source of the video. Specify information in one of these fields:
    Youtube URL
    If the video is available on Youtube, specify the URL to the video.
    Vimeo URL
    If the video is available on Vimeo, specify the URL to the video.
    Video File
    To add a video that has been uploaded in the Documents and Media form, click the SELECT button and choose the file.
  12. Specify video decoration information:
    Standby Poster
    Optionally, select an image that overlays the video when the video is not playing. Ensure that the image is the same height and width as the video. Otherwise, the image is not displayed correctly.
    Heading Text
    Optionally, specify a heading for the video. The heading is displayed on your website.
    Video Description
    Specify a description for the video.
  13. Specify how the video is displayed on your website. Select one or more of these check boxes:
    Autoplay video
    Select this check box to automatically play the video when the web page that it is on is opened.
    Show video controls
    Select this check box to show video controls, such as the Play button and the Stop button. Video controls are always shown for Vimeo videos.
    Loop video
    Select this check box to continuously play the video.
    Background mode
    If you are displaying a Vimeo video, select this check box to mute the video and to remove the video controls.
  14. Specify information about how the video looks and feels:
    Text color
    Specify the text color for the heading. You can use hex codes or specify the name of the color.
    Remove Portlet Spacing
    Select this check box to remove the spacing between columns when the web content is placed on a page that has multiple columns in the layout. The video will span the columns. Clear this check box to place the video within a single column.
    Searchable
    Select this check box to make the content available to the Liferay Search tool.
  15. Click Publish.