Video

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Active Fitch Ratings' Risk Radar 1630320042001 0:02:21.442 Chief Credit Officer John Olert talks about the macroeconomic risk factors outlined in Fitch's most recent Risk Radar report. Ad Supported

Wed, 05/09/2012 - 05:00 ngame Wed, 05/09/2012 - 17:03

Code

HTML Twig CSS SCSS

<div class="video">
        <div class="video__wrapper">
        </div>
</div>

{{ attach_library('fitch_master/video') }}
{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  ]
%}
{% block paragraph %}
{% if content.field_video.0 is not empty %}
    <div class="video">
        <div class="video__wrapper">
            {{ content.field_video.0 }}
        </div>
    </div>
  {% endif %}
{% endblock paragraph %}

.video {
  position: relative;
  margin-bottom: var(--spacing-2);
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  display: block;
}

.video--bg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  z-index: -1;
}

.video--overlay:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-background);
  opacity: 0.44;
}

.video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.video-js .vjs-big-play-button:focus {
  border-color: none;
  background-color: none;
  transition: none;
}

.video-js:hover .vjs-big-play-button {
  background: none;
  border: 0.3rem solid var(--inverted-text-color);
  box-shadow: 0 0 1.2rem;
}

.video-js .vjs-tech {
  -o-object-fit: cover;
  object-fit: cover;
}

.video .vjs-tech {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.video .vjs-big-play-button {
  top: 50%;
  left: 50%;
  width: 8.4rem;
  height: 8.4rem;
  margin: 0;
  padding: 0;
  font-size: 3.5em;
  line-height: 1;
  background-color: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 1.2rem;
  border: 0.3rem solid var(--inverted-text-color);
  border: 0.3rem solid inherit;
  border-radius: 50%;
  color: var(--inverted-text-color);
  transform: translate(-50%, -50%);
  transition: box-shadow 360ms ease;
  z-index: 2;
}

.video .vjs-big-play-button .vjs-icon-placeholder:before {
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  font-size: 4.8rem;
}

.video .vjs-control-bar {
  z-index: 2;
}

.video__wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.section__video-player {
  padding-bottom: 18rem;
}

.section__video-player .video__wrapper {
  margin-bottom: 2.4rem;
}

.video {
  position: relative;
  margin-bottom: var(--spacing-2);
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  display: block;

  &--bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    z-index: -1;
}
  

  &--overlay:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-background);
    opacity: 0.44;
  }

  &-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    
    .vjs-big-play-button:focus {
      border-color: none;
      background-color: none;
      transition: none;
    }
    &:hover {
      .vjs-big-play-button {
        background: none;
        border: 0.3rem solid var(--inverted-text-color);
        box-shadow: 0 0 1.2rem;
      }
    }

    .vjs-tech {
      object-fit: cover;
    }
  }
  
  .vjs {
    &-tech {
      width: 100%;
      height: 100%;
      object-fit: cover;      
    }

    &-big-play-button {      
      top: 50%;
      left: 50%;
      width: 8.4rem;
      height: 8.4rem;
      margin: 0;
      padding: 0;
      font-size: 3.5em;
      line-height: 1;
      background-color: rgba(0,0,0,.45);
      box-shadow: 0 0 1.2rem;
      border: 0.3rem solid var(--inverted-text-color);
      border: 0.3rem solid inherit;
      border-radius: 50%;
      color: var(--inverted-text-color);
      transform: translate(-50%, -50%);
      transition: box-shadow 360ms ease;
      z-index: 2;
      
      .vjs-icon-placeholder:before {
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        font-size: 4.8rem;
      }
    }
    &-control-bar {
      z-index: 2;
    }
  }

  &__wrapper {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
  }
}

.section__video-player {
  padding-bottom: 18rem;

  .video__wrapper {
    margin-bottom: 2.4rem;
  }
}

Design Files

Figma

Fields

Label	Machine name	Field type	Character Limit	Required
Video	field_video	Entity reference	N/A	Yes

Use Case

The video component is used to display Brightcove videos, either as an embed or via the autocomplete field once supported for Drupal 9.

Component Options

There are no options for this component.

Component

Video