Videos

All video should be embedded and displayed in a Youtube player. Default sizing is 16:9 aspect ratio. The embed code should be placed inside a predetermined class to ensure the element is responsive. The width and height attributes are not required in the embed URL, as these are overridden with CSS.

YouTube

The examples below display front end styling and HTML markup to implement Videos into your code. A default video embed from YouTube.

html
            <div class="rc-video-wrapper">
	<iframe src="https://www.youtube.com/embed/FYwO1fiYoa8?rel=0&controls=0&showinfo=0?ecver=1" frameborder="0" allowfullscreen=""></iframe>
</div>
        

Maximum width

Note: If you want to restrict the maximum width of the video, wrap it in .rc-layout-container with proper max-width class.

html
            <div class="rc-layout-container  rc-max-width--md">
  <div class="rc-column">
     <div class="rc-video-wrapper">
        <iframe src="https://www.youtube.com/embed/FYwO1fiYoa8?rel=0&controls=0&showinfo=0?ecver=1" frameborder="0" allowfullscreen=""></iframe>
     </div>
  </div>
</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 30th October 2018 [ui_assets/elements/videos.yml]
    Add new video example with max width container
  • 12th July 2018 [ui_assets/elements/videos.yml]
    Prefixed classes throughout the portal with rc-.
  • 8th March 2018 [ui_assets/elements/videos.yml]
    Re-ordered nav items
  • 8th March 2018 [ui_assets/elements/videos.yml]
    Ordered elements alpabetically
  • 19th February 2018 [ui_assets/elements/videos.yml]
    Convert all multi line text to use
  • 1st December 2017 [ui_assets/elements/videos.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/videos.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/elements/videos.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 29th August 2017 [ui_assets/elements/videos.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 19th July 2017 [ui_assets/elements/videos.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/elements/videos.yml]
    Git commit message sync improvements. Folder restructure.
  • 11th July 2017 [ui_assets/elements/videos.yml]
    Added remaining content.