Video

Use .video element to style elements related to the video module.

Structurally .video contains following elements:

• .yt-video__container
• .video__container
• .video__controls
• .video__transcript-modal-opener
• .video__play-button

It also contains following class modifiers:

• .video__controls-play
• .video__controls-pause
• .video__controls-ad
• .video__audio-description-display
• .video__audio-description-text

Example

Here is an example of faq element usage.

HTML

<h-video src="/upload/my-video.mp4" module-instance-id="144" settings="{&quot;video_type&quot;:&quot;self-hosted&quot;,&quot;posterSrc&quot;:&quot;&quot;,&quot;videoDescription&quot;:&quot;&quot;,&quot;autoplay&quot;:true,&quot;controls&quot;:true,&quot;muted&quot;:false,&quot;loop&quot;:true,&quot;aspectRatio&quot;:&quot;16\/9&quot;,&quot;captionTrackLink&quot;:&quot;&quot;,&quot;captionLang&quot;:&quot;pl&quot;,&quot;audioDescriptionTrackLink&quot;:&quot;&quot;,&quot;audioDescriptionLang&quot;:&quot;pl&quot;,&quot;transcriptTrackLink&quot;:&quot;&quot;,&quot;moduleInstanceId&quot;:144}">
     <div class="video">
        <figure class="video__container">
            <video preload="metadata" width="100%" height="100%" playsinline="" aria-label="video" poster="" controls="" loop="" autoplay="">
                <source src="/upload/my-video.mp4" type="video/mp4">
                <p>Twoja przeglądarka nie obsługuje tagu wideo.</p>
            </video>
            <div class="video__custom-controls">
                <button class="video__controls video__controls-ad inactive" aria-pressed="false" aria-label="Turn on audio description">
                    <h-icon icon-name="icon-audio-description">
                        <svg class="icon ">
                            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-audio-description"></use>
                        </svg>
                    </h-icon>
                    <span class="sr-only">Turn on audio description</span>
                </button>
            </div>
        </figure>    
    </div>
</h-video>

LESS

You can modify any video less variable in your User Less section to change video styles.

Video variables

Variables used to style video.

@videoPlayButtonSize: 3rem;
@videoPlayButtonColor: @neutralColors0;
@videoPlayButtonBorderRadius: 50%;
@videoPlayButtonTransition: 0.2s ease-in-out;
@videoPlayButtonHoverBoxShadow: @splideArrowHoverBoxShadow;

@videoControlsButtonBottomPosition: 30px;
@videoControlsButtonTransition: 0.2s ease-in-out;
@videoControlsButtonSize: 36px;
@videoControlsButtonDisabledColor: #7b7a77;
@videoControlsButtonColor: @neutralColors0;
@videoControlsButtonBgColor: rgba(44, 50, 59, 0.6);
@videoControlsButtonBorderRadius: 50%;

@videoAudioDescriptionDisplayPadding: 0.75rem;
@videoAudioDescriptionDisplayBackgroundColor: @neutralColors1000;
@videoAudioDescriptionDisplayColor: @neutralColors0;
@videoAudioDescriptionDisplayFontSize: 1rem;
@videoAudioDescriptionDisplayHeight: 2.5rem;

@videoTranscriptLinkColor: #0745c0;
@videoTranscriptLinkColorHover: @globalFontColor;

If you want to change video styles, you can just change the variables. To change a default border-radius of the custom play button (visible with video cover image) just modify @videoPlayButtonBorderRadius variable.

@videoPlayButtonBorderRadius: 1px;

Video standard styles

Here are standard video styles.

.video {
    display: flex;
    flex-direction: column;

    &__container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;

        &:hover,
        &:focus {
            .video__controls {
                opacity: 1;
            }
        }
    }

    &__transcript-modal-opener {
        text-decoration: none;
        color: @videoTranscriptLinkColor;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
            color: @videoTranscriptLinkColorHover;
        }
    }

    &__controls {
        position: absolute;
        bottom: @videoControlsButtonBottomPosition;
        background: transparent;
        opacity: 0;
        transition: opacity @videoControlsButtonTransition;
        line-height: 1;

        .icon {
            stroke: @videoControlsButtonColor;
        }

        &-play,
        &-pause {
            .icon {
                fill: @videoControlsButtonColor;
            }
        }

        &:hover,
        &:focus {
            opacity: 1;
            h-icon {
                background: @videoControlsButtonBgColor;
                border-radius: @videoControlsButtonBorderRadius;
                box-shadow: 0px 0px 0px 8px @videoControlsButtonBgColor;
            }
        }

        &-ad {
            min-width: @videoControlsButtonSize;
            height: @videoControlsButtonSize;
            left: 50%;
            transform: translateX(-50%);
            transition: all @videoControlsButtonTransition;

            &.inactive {
                .icon {
                    stroke: @videoControlsButtonDisabledColor;
                }
            }
        }

        &-play,
        &-pause {
            left: 16px;
            border-radius: @videoControlsButtonBorderRadius;
        }

        .disabled {
            .icon {
                stroke: @videoControlsButtonDisabledColor;
            }
        }
    }

    &__play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        display: grid;
        place-content: center;

        width: @videoPlayButtonSize;
        height: @videoPlayButtonSize;
        background-color: @videoPlayButtonColor;
        border: none;
        border-radius: @videoPlayButtonBorderRadius;
        padding: 0;

        cursor: pointer;
        transition: all @videoPlayButtonTransition;

        &:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: @videoPlayButtonHoverBoxShadow;
        }

        svg {
            width: @iconXlSize;
            height: @iconXlSize;
        }
    }

    &__audio-description-display {
        display: none;
        width: 100%;
        height: @videoAudioDescriptionDisplayHeight;
        padding: @videoAudioDescriptionDisplayPadding;
        background-color: @videoAudioDescriptionDisplayBackgroundColor;
        color: @videoAudioDescriptionDisplayColor;
        font-size: @videoAudioDescriptionDisplayFontSize;
        text-align: center;
        box-sizing: border-box;
    }

    &:has(.video__controls-ad.active) {
        .video__audio-description-display {
            display: block;
        }
    }
    &__audio-description-text {
        display: block;
        .weight-bold();
    }
}

.yt-video__container {
    display: flex;
    flex-direction: column;
}

Modules reference

• video