Embedding YouTube videos from Action Streams

The next logical step from displaying a thumbnail of your posted or favourite videos is to actually enable playing of the video in your own webpage. Thankfully, this is simple with youtube's embed code and your Action Stream. I've now added this to my video calendar page and i think it looks good and works rather well. It may be a little to much to add it to the home page, plus we don't want that to slow down any, it's already having to grab resources from all over the place anyway, so adding 9 embedded videos may be a little too much!

Code after the jump..

Simply add the following ot your template to display videos embedded on the page:


<mt:if name="service_type" eq="youtube">
<mt:SetVarBlock name="videoid"><$MTStreamActionURL regex_replace="/http:\/\/www\.youtube\.com\/watch\?v\=/","" $></mt:SetVarBlock>
<object width="320" height="265">
    <param name="movie" value="http://www.youtube.com/v/<mt:var name="videoid">&hl=en&fs=1&rel=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/<mt:var name="videoid">&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>
</object>
</mt:if>

This grabs the actual video id from the StreamURL and sticks it into the standard embed html that each video provides. You can adjust the sizes, I find the easiest way to make sure you get it proportional is to actually go to a video on youtube, select the embed and customise options then view the code it outputs. From this you can work out what to change in the above code to add related videos, changel colours, add a border etc etc.

Embedding YouTube videos from Action Streams

Leave a comment

Recent Entries

YUI Editor in Movabletype v1.3

Adding YUI RTE in MoveableType Community Solution

YouTube lightbox

New Host

I've been a fool!