Video & Audio

YouTube video example

Description of the following video:

[MUSIC]

Words appear: We made many promises in 2016 ...

Announcer voice: Every day is a great day to be a Hoosier.

Words appear: Indiana University 2016 in review

Words appear: Promises that count

[MUSIC]

Announcer voice: IU athletes and coaches have competed in every Summer Olympic games since 1932.

Words appear: 15 Hoosiers competed in the 2016 Olympics

And Indiana now boasts 223 former Olympians representing 25 different dimensions.

Words appear: $45 million renovation of Assembly Hall

Announcer voice: The most tradition-filled building in all of college sports.

[MUSIC]

Words appear: $300 million invested in the Grand Challenges program

President McRobbie: We are part of something big.

[MUSIC]

Words appear: Big Ten title match-up

Announcer voice: It's Yogi. It's three!

Got a ball! Yogi with a big three!

Anunoby is fouled.

Announcer voice: And the bucket returns to Bloomington.

Words appear: 2 Both men's and women's basketball teams made the NCAA tournament

Words appear: 4 consecutive Old Oaken Bucket wins

Words appear: 2 consecutive bowl appearances

Announcer voice: Get this program back where it belongs.

[MUSIC]

Words appear: 5500 IU alumni raised $11 million on the first ever #IUDay

Words appear: The hashtag #IUDay reached 9.4 million people in 24 hours.

Words appear: $15 million + 100 works of art gifted to the IU Art Museum (now the Sidney and Lois Eskenazi Museum of Art)

President McRobbie: A building designed by one of the greatest architects of the 20th century.

Words appear: Over $4 million raised for Riley Hospital for Children through the IU Dance Marathon

Announcer voice: $4,152,440

[MUSIC]

Words appear: #1 business program among public universities, Kelley School of Business (Bloomberg Businessweek)

Words appear: #1 public affairs graduate program, SPEA Bloomington (U.S. News & World Report)

Student voice: I know headlines and news looks a little bit bleak.

Second student voice: No matter what you're going through or how hard times may be, push through.

Take everything day by day, minute by minute.

Words appear: 3.4 million social media conversations from a community that cares

There is light at the end of every tunnel.

[MUSIC]

Words appear: All in for a community where you belong

Words appear: All in for a legacy of strength

Words appear: All in for a brighter future for all

Words appear: We made many promises in 2016

Words appear: And we kept them all

Speaker: Here at Indiana University, I can't tell you how proud that makes me.

Words appear: To see all the promises IU kept, visit 2016.iu.edu

[MUSIC]

Words appear: Indiana University

Words appear: Fulfilling the Promise

Words appear: iu.edu

[END OF TRANSCRIPT]

Description of the following video:

[END OF TRANSCRIPT]

This is the video caption
Show/hide markup
<div class="visually-hidden">
    <p>Description of the following video:</p>
    <p>[END OF TRANSCRIPT]</p>
</div>

<figure class="media video ">

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

    <figcaption>This is the video caption</figcaption>
</figure>

HTML5 video example

The following is a decorative video

Description of the following video:

[END OF TRANSCRIPT]

This is the HTML5 Video caption
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 -->

<div class="visually-hidden">
    <p>Description of the following video:</p>
    <p>[END OF TRANSCRIPT]</p>
</div>

<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" />
    </video>
    <figcaption>This is the HTML5 Video caption</figcaption>

</figure>

HTML5 audio example

This is the caption for an HTML5 Audio element
Show/hide markup
<!-- add inline width/height for responsive video -->
<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>This is the caption for an HTML5 Audio element</figcaption>
</figure>

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.