Video's are attention grabbing, more memorable, and convey visual cues like body language, tone of voice and eye contact - all of which can create more engaging content and relay information to your visitors in a way that makes you stand out from the crowd.
💡 Does your organisation have a YouTube or Vimeo channel, or have your seen content created by someone else that you want to share? If so, this module is a great option to explore!
How to add Play YouTube/Vimeo video in pop-up
Navigate to a Document.
Select ‘Interactivity’ for the Version of the Document that you want to work on.
The Version will then open in Interactivity mode and the Interactivity palette can be found to the right of your page.
Select the ‘Media’ module type from the ‘Add Interactivity' palette.
Select the ‘Play YouTube/Vimeo video in pop-up’ option.
Click and drag out the area to add to your page - this is the clickable area that the visitor will select to view the video in a pop-up box.
Paste the URL for the video into the 'YouTube/Vimeo' video link field.
YouTube/Vimeo videos cannot be embedded on a page.
Settings
The Settings palette will activate when any module on a page is selected. You can then apply settings, such as border colour and size.
1. General
Title
The 'Title' field is set default, but it's important to update it to something unique that reflects the interactivity - for example, 'Company Introduction Video'. Descriptive names make it easier to identify the interactivity in your document, which is particularly helpful if you're using lots of the same module type.
Tooltip
A tooltip is a short piece of text which appears when a cursor is positioned over a module. It can be used to provide a brief description or explanation of the module - for example 'Company introduction YouTube video'.
2. Controls
Auto Play
Select the 'Auto Play' checkbox to automatically play the video once the clickable area has been selected.
3. Accessibility
Focus Outline Colour
If Accessibility has been enabled for your document, this option can be used to choose the colour of the Focus Outline Colour. Focus Outline Colour is the colour of the outline that displays around the piece of Interactivity being viewed when a visitor uses the Tab key to navigate around a document.
4. Popup Style
Border Colour
A border adds a keyline around the video pop-up box, and can be used as a way to draw attention to your content. Use this field to specify the colour of the border.
Border Size
Use the 'Border Size' field to specify the width of the border around the video pop-up box. Enter a numerical value to set the border width - the higher the value, the thicker the border.
Back Colour
The 'Back Colour' field allows you to set the background colour of the box that the video is displayed in - select from the colour picker, enter a HEX code, or choose from your brand colours. Think about the choice of colour - it can reflect your brand personality, as well as evoke emotions or draw attention to content.
Margin Size
Margins create breathing space by adding a clear separation between the video and the pop-up box that it is displayed in. Enter a numerical value to set the margin size - the higher the value, the larger the margin.
Max Width & Max Height
Adjust the width and height of the pop-up box that the video will be displayed in. The size is measured in pts and should be the same ratio as your video file.
Disable Close
This option can be selected if you want to prevent the visitor from closing the video pop-up box. Be mindful when using this option, to ensure they don't get stuck or unable to progress in your document.
5. Clickable Area
Position X & Y
Adjust the position of the clickable area. 'X' sets the position of the left edge and 'Y' sets the top edge.
Width & Height
Adjust the width and height of the clickable area. The size is measured in pts.
Link to Panel
Link the module to a Panel in your document. Once linked, the module will move with the Panel if it is repositioned or resized.
