Video & Audio

YouTube video example

This is an example of a YouTube video.

Description of the video:

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

HTML5 video example

The following is a decorative video

This is an HTML5 video example.

Description of the video:

[Student Building chimes ring]

Mom, let go.


Amber, right?


[laughter]


Chillin with Herman!


[sigh]


[alarm clock beeps]


So, as with any idea, the question is-


Yes!


- Oh, yes!
- Oh my-


- Oh, no, this is so good.
- Are you serious?


Game time.


[crowd cheering]


[pep band plays]


[camera clicking]


[violin playing]


How was class?


[laughter]


[splashing]
[laughter]


[crowd noise and cheering]


In five, four-


And it's about leadership and public policy-


- Here's a copy of my resume.
- Great!


[background music begins]


[sound of bicycles and laughter]


The next four years are limitless.


What will you do first?


Indiana University


Fulfilling the promise
Show/hide markup
<!-- 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>

HTML5 audio example

"Indiana, Our Indiana" Sylvia McNair

Audio transcript

Audio transcript:

Indiana, our Indiana
Indiana, we're all for you!
We will fight for the cream and crimson
For the glory of old IU
Never daunted, we cannot falter
In the battle, we're tried and true
Indiana, our Indiana,
Indiana we're all for you! I-U!

Show/hide markup
<figure class="media audio">
    <audio id="player2" src="//assets.iu.edu/web/media/audio/indiana-our-indiana.mp3" type="audio/mp3" controls="controls"></audio>
    <figcaption><span class="caption-text">"Indiana, Our Indiana"</span> <span class="caption-credit">Sylvia McNair</span></figcaption>
</figure>

<div class="text">
    <!-- Use appropriate heading level -->
    <h4>Audio transcript</h4>
    <p>Audio transcript:</p><p>Indiana, our Indiana<br/>
    Indiana, we're all for you!<br/>
    We will fight for the cream and crimson<br/>
    For the glory of old IU<br/>
    Never daunted, we cannot falter<br/>
    In the battle, we're tried and true<br/>
    Indiana, our Indiana,<br/>
    Indiana we're all for you! I-U!</p>
</div>

Apply IU style to any site

You can use our style and code snippets to improve any website in any content management system. Or you can request a copy of the Web Framework, a self-service tool that lets developers build a site in the WCMS.

If you would like to learn more about how we can help you build your website in the Web Framework, contact Eleanor Berman at IU Communications.