Videos - The University of Pennsylvania Component Guide

Inline Video

Looping autoplaying inline video

Inline video with poster and controls

Notes

  • This component uses embed HTML5 videos.
  • The example source from Vimeo was pulled from the current website.
  • JavaScript can be found in _video-inline.js

Code

Video with Card (opens in Modal)

An Ecosystem of Innovation

Today, Penn, the same research enterprise that created ENIAC in the late 1940s, the world’s fist all-electronic computer, is booming. Top researchers provide imagination and creativity. Penn provides the cutting-edge resources and infrastructure. This leads to novel inventions that hold promise to change the world.

Learn More

Notes

  • The video used in the modal uses the Inline Video component
  • The modal trigger is a button with a data attribute of data-modal where the value is the ID of the modal.
  • All modals need to be outside of the #top element. We use JavaScript to trap focus in the modal as is best practice.
  • On modal open focus is shifted to the modal and the video will play.
  • Closing the modal will pause the video and return focus the button that opened the modal.
  • Modals can be closed by the button, clicking on the overlay or the ESC key.
  • JavaScript for this component can be found in /assets/js/_modal.js as the modal can be used across components.

Code

Vimeo Video Player

Poster and button example

No poster or button example

Notes

  • This component was built using the Vimeo API.
  • The Vimeo API JavaScript is only added to the page if the use of this component is detected (_video-vimeo.js)
  • The _vimeo-video.js is looking for the data attribute data-vimeo with the value of the video id
  • The video poster is added as a background image, if no poster is used do not add the class video-vimeo--poster and leave out the button code, the default Vimeo player and controls will be present.
  • The API will not play protected videeos, those need to be embedded with the inline video component
  • If this component will never be used remove import video_vimeo from '../../components/video-vimeo/_video-vimeo'; from the site.js and recompile.

Code