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>
        

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

  • 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.