UABIT CSS/JS Library

# Video Embed

Video example

source

# Usage

A video embed component can substitute a link to a YouTube video in favor of an embedded version. Only videos from official UAB channels should be embedded.

# Markup

<div class="video-container">
  PASTE EMBED CODE HERE
</div>

The division element with the video-container class makes sure the video fills the full width of its container, and ensures the video resizes with the proper 16:9 aspect ratio on screen resize.

# Embedding video

To embed a YouTube video, right click the video on YouTube and select “copy embed code”. Then paste that embed code in the area indicated in the code sample above.

The resulting HTML should look similar like this:

<div class="video-container">
  <iframe width="960" height="540" src="https://www.youtube.com/embed/Tlt6S8gofuI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

← Details →