This article starts where this one left off…
Embedding YouTube movies
In this method, you use a separate template for the video and pass in parameters for the youtube video id, as well as the desired height and width. In this way you can, among other things, present the movie in one size on a list page and another size on a detail page.
Step 1: Add Custom Field
Add a custom field named “youtube_id” to the field group for your weblog.
Step 2: Create Video Template
Create a new template for the video player. The template type should be web page.
HINT: Make a note of the group name and template name
Then paste this code into the template…
<object width="{embed:youtube_width}" height="{embed:youtube_height}">
<param name="movie" value="http://www.youtube.com/v/{embed:youtube_id}"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/{embed:youtube_id}" type="application/x-shockwave-flash" wmode="transparent" width="{embed:youtube_width}" height="{embed:youtube_height}"></embed></object>
For XHTML Validity, this option also works:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/{embed:youtube_id}" width="{embed:youtube_width}" height="{embed:youtube_height}">
<param name="movie" value="http://www.youtube.com/v/{embed:youtube_id}" />
<param name="FlashVars" value="playerMode=embedded" /></object>
Step 3: Embed the Template
Embed the video player template into your weblogs tag.
PLEASE NOTE: You MUST change the spelling of “imbed” to “embed” in the code snippet below for this to work. It was the only way I could get the example to show correctly.
{exp:weblog:entries}
{title}
{body}
{if youtube_id != ""}
{imbed="includes/youtube" youtube_id="{youtube_id}" youtube_width="425" youtube_height="350"}
{/if}
{/exp:weblog:entries}
That’s about it.
NOTE: If you really wanted to get fancy you could make this much more reusable and flexible. First you’d have a separate weblog just for the videos. You could use custom fields for that weblog to make it easy to give each video can also have a title, caption, etc… Next, add custom relationship type field into your “real” blog and relate it to the blog of videos. Finally, you use the relationship tags to show the video on the blog post page. Will try to put together a more detailed tutorial for this method time permitting.
Category:TutorialsCategory:Video