Search code examples
javascriptjquerydomooyala

DOM script insertion

I have been meaning to insert a small script into the DOM at runtime in order to load a video player. but the player gets loaded in all different places except the <div> where i want it to be. i dont understand how to deal with this. i am pasting the entire code here. please help me out. 

<html>
<head><title>video test</title>
<script type="text/javascript" src="resources/js/jquery.js"></script>
<script type="text/javascript" src="swf.js"></script>
<script type="text/javascript">

$(document).ready(function(){
//  debugger;
    var template = $('<div class="sResult"><div class="figure"></div><div class="title"></div></div>');
    var url = 'http://player.ooyala.com/player.js?width=320&amp;height=240&amp;embedCode=thbXMxMzpq0RhOS82Hzx1lma8UMnFN-3&amp;callback=apicallback';
    var tempScript = document.createElement('script');
    tempScript.type = 'text/javascript';
    tempScript.src = url;

    $("#main").append(template);


    $("div.figure", $('#main')).html(tempScript);
    $("div.title", $('#main')).append("testkjdfnkjdb");

})
</script>   

</head>
<body>
    <div id="main"></div>
</body>
</html>

the append procedure for div.title is working fine. but the div in which i am trying to append the video player is not working correctly. the video player is getting appended to the <head>

EDIT: can some javascript guru please look into the player.js and tell me why isn't it working for me?

the player <div> contains the following:

<div style="width: 320px; height: 240px; overflow: hidden;" id="ooyalaPlayer6764909_10qreejOoyalaPlayerOutterWrapper"><object width="320" height="240" type="application/x-shockwave-flash" id="ooyalaPlayer6764909_10qreej" class="OoyalaVideoPlayer" data="http://player.ooyala.com/static/cacheable/fb1a00342b9ec2d6df7c69946617dcee/player_v2.swf"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="bgcolor" value="#000000"><param name="wmode" value="window">
<param name="flashvars"></object></div>
Solution

  • You can also provide the Ooyala player with a targetReplaceId=(element id) query string parameter to force it to replace an item on page.