Archive: Thu 22 Nov 2012

  1. Audio and video embedding

    As well as sorting out image handling when putting together my halcyon days of Sinclair post, I did a little research on how best to embed the audio and video clips in that article.

    I decided to use the audio sharing site SoundCloud for the audio clip. Their embedded audio player looks good and scales nicely with a responsive web design like this one – so I didn’t need to make any additional changes to the site’s CSS. The whole process of creating an account, uploading the audio clip and generating the code for embedding in the article was really straightforward.

    The video clip was an existing YouTube video. Embedding YouTube clips is generally fairly easy, but to get their player to scale in the same way as the SoundCloud player requires a little work in CSS. Fortunately A List Apart came to the rescue with an article by Thierry Koblentz on Creating Intrinsic Ratios for Video.

    The HTML to embed the YouTube clip looks like this:

    <span class="embed-youtube" >
     <iframe class="youtube-player" type="text/html" 
     src="http://www.youtube.com/embed/It2PGpFppN8?version=3&amp;rel=1&amp;fs=1&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent" 
     frameborder="0">
     </iframe>
    </span>

    Applying the techniques outlined in Thierry Koblentz’s article, results in this CSS:

    .embed-youtube {
        text-align: left !important;
        margin-bottom: 1em;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
    }
    
    .embed-youtube iframe,
    .embed-youtube object,
    .embed-youtube embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    In essence, it’s necessary to create a wrapper element (.embed-youtube) that does all of the scaling to hold the embedded video element (.embed-youtube iframe). The article explains this in detail, though the CSS is relatively self-explanatory except for the padding-bottom and padding-top declarations. These are actually the clever bits. The padding-bottom is set to create the 16:9 ratio for the video (9 divided by 16 = 0.5625); and the padding-top is some extra space for the YouTube controls (which are a fixed 25px). Setting a different padding-bottom percentage would result in a different box ratio. For example, 4:3 would be 75% (3 divided by 4 = 0.75).

    I’ll admit, I haven’t added some of the CSS manipulations necessary to get everything working in earlier versions of Internet Explorer, though it is possible if you don’t mind adding a little extra markup. I decided to keep it clean.