Media Player

MP4 Video Player #

<div class="media">
    <video
        title="Welcome to Mount Union"
        poster="/assets/images/mountunion-template-hero_academic_dept.jpg"
        data-object-fit="cover"
    >
        <source
            type="video/mp4"
            src="/assets/video/mountunion.mp4"
        />
        <track
            src="assets/video/mountunion.en.vtt"
            srclang="en"
            label="English"
            kind="subtitles"
            default
        >
    </video>
</div>

YouTube Video Player #

UMU Branded Controls

<div
    class="media"
>
    <video
        width="605"
        height="340"
        poster="/assets/images/mountunion-template-hero_academic_dept.jpg"
        data-object-fit="cover"
    >
        <source
            type="video/youtube"
            src="https://www.youtube.com/watch?v=AdJTjqoNhhI"
        />
        <track
            src="assets/video/mountunion.en.vtt"
            srclang="en"
            label="English"
            kind="subtitles"
            default
        >
    </video>
</div>

YouTube Default Controls

<div 
    class="media"
    data-youtube-controls="true"
>
    <video
        width="605"
        height="340"
        poster="/assets/images/mountunion-template-hero_academic_dept.jpg"
        data-object-fit="cover"
    >
        <source
            type="video/youtube"
            src="https://www.youtube.com/watch?v=AdJTjqoNhhI"
        />
    </video>
</div>

Audio Player #

<div class="media">
    <audio
        id="player2"
        src="/assets/audio/mountunionaudio.mp3"
        type="audio/mp3"
        controls="controls"
    >
</div>

Style #