Embedding YouTube Video with jQuery Templates - C#

Question

I'm using jQuery Templates to Embed user posted YouTube vids. I am able to fetch the video id and save it into the database and everything is working correctly. However when trying to embed the video with jQuery Templates as follows:

{{if streamObj.TypeOf == 3}}
            <object width="425" height="350" data='http://www.youtube.com/v/${VideoId}' type="application/x-shockwave-flash">
            <param name="src" value='http://www.youtube.com/v/${VideoId}' /></object>
{{else}}

I get the following error: "NetworkError: 404 Not Found - http://www.youtube.com/v/"

${VideoId} and streamObj.TypeOf return correctly. But that's the error. What could be causing this? Thank you.

Devoirs

The error message showing the youtube url is missing the video id (http://www.youtube.com/v/). Are you sure the placeholder ${VideoId} gets replaced ? – Crescint

Are you sure that ${VideoId} is not an empty string ? – Pieria

open firebug or some other javascript console to check if the url is being generated after the page has loaded. your VideoId might be getting reset somewhere. – Kerch

Answer 1

Try this.

<object width="425" height="350" data='http://www.youtube.com/v/' + ${VideoId} type="application/x-shockwave-flash">
    <param name="src" value='http://www.youtube.com/v/' + ${VideoId} />
</object>

Or perhaps better.

var videoUrl = 'http://www.youtube.com/v/' + ${VideoId};

<object width="425" height="350" data=videoUrl type="application/x-shockwave-flash">
    <param name="src" value=videoUrl />
</object>

I believe that the template tag in your code isn't evaluated corretly due to the fact that the template tag is set as a part of a js string value.

Amabel

Answer 2

you should get the ${VideoId} out of string and use a string operation like

var videoIdString=${videoId};

var urlString='http://www.youtube.com/v/' + videoIdString ;

Because :

in this page , ive never seen ${} used between quotes .

http://api.jquery.com/template-tag-equal/

so your code would be :

var videoIdString=${videoId};

<object width="425" height="350" data='http://www.youtube.com/v/'+videoIdString
type="application/x-shockwave-flash">
<param name="src" value='http://www.youtube.com/v/'+videoIdString /></object>

Zurheide