Video & Audio

<figure class="media video ">

    <div class="flex-video widescreen">
       <iframe title="YouTube Video" allowfullscreen="allowfullscreen" content="https://www.youtube.com/embed/x0UkZq2VtGk" frameborder="0" height="100%" itemprop="embedUrl" src="https://www.youtube.com/embed/x0UkZq2VtGk" width="100%"></iframe>
    </div>

    <figcaption>This is an example of a YouTube video.</figcaption>
</figure>

<div class="visually-hidden">
    <p>Description of the video:</p>[Music]
    <br/> [Video: A student stands at the front of a line waiting to audition for a performance]
    <br/> [Video: An audition committee awaits a performance]
    <br/> [Words appear: Ailyn, Indiana University, 1997]
    <br/> [Video: A student sings accompanied by a piano]
    <br/> [Video: A professor smiles as the student performs]
    <br/> [Video: The student pushes a large stage prop across an opera set]
    <br/> [Video: The student pulls on a rope back stage]
    <br/> [Video: The student works with a vocal coach]
    <br/> [Video: The student checks a casting list to discover she has not been selected. She is visibly disappointed]
    <br/> [Video: The student selects a costume in the wardrobe shop]
    <br/> [Video: The student, holding a clipboard and wearing a headset, works off stage directing a performer to enter the stage]
    <br/> [Video: The student, in the role of makeup artist, applies eye makeup to a cast member]
    <br/> [Video: The student checks a casting list to again discover she has not been selected. She is visibly disappointed]
    <br/> [Video: The student works with another vocal coach]
    <br/> [Video: The student sits on a park bench singing]
    <br/> [Video: The student checks a casting list to discover she has finally been assigned a role]
    <br/> [Video: The student is fitted with a wig]
    <br/> [Video: The student sings on stage with other performers behind her]
    <br/> [Words appear: Ailyn Perez, Lincoln Center 2014]
    <br/> [Video: Opera singer Ailyn Perez performs on stage]
    <br/> [Video: A crowd applauds enthusiastically]
    <br/> [Video: Perez is seated in a dressing room]
    <br/> Ailyn speaks: I wouldn&#8217;t be here if it weren&#8217;t for Indiana University]
    <br/> [Video: The Indiana University trident appears]
    <br/> [Words appear: Indiana University]
    <br/> [Words appear: Fulfilling the Promise]
    <br/> [Words appear: iu.edu]
</div>

<!-- Ideally, the width="508" and height="348" would accurately reflect the correct asset ratio -->
<!-- the inline style width/height of 100% allow for responsive video -->

<figure class="media video">

    <video width="508" height="348" style="width: 100%; height: 100%;" poster="//assets.iu.edu/web/media/video.jpg" controls preload="none">
        <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
        <source type="video/mp4" src="//assets.iu.edu/web/media/video/video.mp4" />

        <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
        <source type="video/webm" src="//assets.iu.edu/web/media/video/video.webm" />

        <!-- Track for closed captioning -->
       <track kind="subtitles" label="English" srclang="en" src="/videos/video-captions.vtt" />
    
    </video>
    <figcaption>This is an HTML5 video example.</figcaption>

</figure>

<div class="visually-hidden">
    <p>Description of the video:</p>[Student Building chimes ring]
    <br/>
    <br/>Mom, let go.
    <br/>
    <br/>
    <br/>Amber, right?
    <br/>
    <br/>
    <br/>[laughter]
    <br/>
    <br/>
    <br/>Chillin with Herman!
    <br/>
    <br/>
    <br/>[sigh]
    <br/>
    <br/>
    <br/>[alarm clock beeps]
    <br/>
    <br/>
    <br/>So, as with any idea, the question is-
    <br/>
    <br/>
    <br/>Yes!
    <br/>
    <br/>
    <br/>- Oh, yes!
    <br/>- Oh my-
    <br/>
    <br/>
    <br/>- Oh, no, this is so good.
    <br/>- Are you serious?
    <br/>
    <br/>
    <br/>Game time.
    <br/>
    <br/>
    <br/>[crowd cheering]
    <br/>
    <br/>
    <br/>[pep band plays]
    <br/>
    <br/>
    <br/>[camera clicking]
    <br/>
    <br/>
    <br/>[violin playing]
    <br/>
    <br/>
    <br/>How was class?
    <br/>
    <br/>
    <br/>[laughter]
    <br/>
    <br/>
    <br/>[splashing]
    <br/>[laughter]
    <br/>
    <br/>
    <br/>[crowd noise and cheering]
    <br/>
    <br/>
    <br/>In five, four-
    <br/>
    <br/>
    <br/>And it's about leadership and public policy-
    <br/>
    <br/>
    <br/>- Here's a copy of my resume.
    <br/>- Great!
    <br/>
    <br/>
    <br/>[background music begins]
    <br/>
    <br/>
    <br/>[sound of bicycles and laughter]
    <br/>
    <br/>
    <br/>The next four years are limitless.
    <br/>
    <br/>
    <br/>What will you do first?
    <br/>
    <br/>
    <br/>Indiana University
    <br/>
    <br/>
    <br/>Fulfilling the promise
</div>