Live Edit


 






Add Video or Audio Files to Your Page

Who can use this feature?

Engage_-_System_Admin.png Engage_-_Slash.png Engage_-_Owner.png Engage_-_Slash.png Engage_-_Publisher.png Engage_-_Slash.png Engage_-_Author.png

 

 

Overview

This article will show you how to embed video or audio files onto your page.

Currently, users can upload video or audio files to the Document Center and then reference the items using HTML. Users must have appropriate Document Center permissions to add or update files.

This is not a recommended practice due to HTML video links not being supported on all browsers (i.e. Internet Explorer), but it allows the use of small media files without linking to another site. Using large files in this way can detrimentally affect site load speeds.

The file formats supported by the same browsers as the CMS are as follows. Any other formats may not work correctly depending on the web browser.

  • Music: mp3
  • Video: mp4

There is not a built-in tool or widget to house media files. Media files can be referenced using any widget or item that allows HTML editing. This includes but is not limited to Custom HTML widgets, Editor widgets or Info Advanced items.

Instructions

  1. Navigate to the desired page
  2. Ensure that Live Edit Is On
    000_Live_Edit_Is_On.png
  3. Select the Widgets tab on the left-hand side
    widgets.png
  4. Add the Custom HTML Widget to your page
    drag_drop_custom_html.png
  5. In the Widget, reference the media file
    audio_tag.png
    • To reference the media file, use the relative URL of the media file in the Document Center as the src. For example, to reference the following file:
      • Link: https://cp-support.civicplus.com/DocumentCenter/View/xxxx/lightsaber
      • HTML: 
        <audio controls="">
        <source src="/DocumentCenter/View/7940/lightsaber" type="audio/mpeg">
        Your browser does not support the audio tag.
        </source>
        </audio>
  6. Click Done
    done_custom_html.png
  7. View Audio or Video Player
    audio_player.png
  8. Click Save at the top of the page
    save_page.png

Resources




I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback