XMLHttpRequest embeds you tube but not other sites with <script> tag embeding

[oli22]

Am using ajax XMLHttpRequest to retrieve embed code from xml for a video gallery, works fine embeding youtube using <embed> and <iframe> tags. Problem is other embeding type in <script> tags from other video sites do not work, why?

I can embed those <script> tags on a regular hml page, but as soon as i try to embed within my gallery it does not work...

my only guess is the javascript processing is altering something?

 

This kind is a problem to embed:

<script src="http://www.vbs.tv/vbs_player.js?width=480&height=270&ec=1seTJ2MTqUMMj_VyAIhsbDemXT4Q-ZnX&st=Powder%20and%20Rails%3A%20Season%203&pl=http://www.vbs.tv/en-ca/watch/powder-and-rails-season-3/tom-sims-part-2-of-2" type="text/javascript" charset="utf-8"></script>

 

youtube embed like this work perfect:

<object width="640" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/LH7oRb5Knjc?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/LH7oRb5Knjc?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/LH7oRb5Knjc?rel=0" frameborder="0"></iframe>

Javasript:

<script type="text/javascript">

 

 

var loadedobjects=""

var rootdomain="http://"+window.location.hostname

 

function ajaxpage(url, containerid){

var page_request = false

if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else if (window.ActiveXObject){ // if IE

try {

page_request = new ActiveXObject("Msxml2.XMLHTTP")

}

catch (e){

try{

page_request = new ActiveXObject("Microsoft.XMLHTTP")

}

catch (e){}

}

}

else

return false

page_request.onreadystatechange=function(){

loadpage(page_request, containerid)

}

page_request.open('GET', url, true)

page_request.send(null)

}

 

function loadpage(page_request, containerid){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

document.getElementById(containerid).innerHTML=page_request.responseText

}

 

function loadobjs(){

if (!document.getElementById)

return

for (i=0; i<arguments.length; i++){

var file=arguments

var fileref=""

if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding

if (file.indexOf(".js")!=-1){ //If object is a js file

fileref=document.createElement('script')

fileref.setAttribute("type","text/javascript");

fileref.setAttribute("src", file);

}

else if (file.indexOf(".css")!=-1){ //If object is a css file

fileref=document.createElement("link")

fileref.setAttribute("rel", "stylesheet");

fileref.setAttribute("type", "text/css");

fileref.setAttribute("href", file);

}

}

if (fileref!=""){

document.getElementsByTagName("head").item(0).appendChild(fileref)

loadedobjects+=file+" " //Remember this object as being already added to page

}

}

}

 

</script>

 

HTML sample:

<div class="items">

    <!-- start scroll distance -->

<div>

 

 

          <div class="item">

          <a href="javascript:ajaxpage('ajaxfiles/external.xml', 'rightcolumn');">video1</a>

          </div>

         

          <div class="item">

          <a href="javascript:ajaxpage('ajaxfiles/external2.xml', 'rightcolumn');">video2</a>

          </div>

         

          <div class="item">

  <a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">video3</a>

  </div>

         

          <div class="item">

          <a href="javascript:ajaxpage('ajaxfiles/external4.xml', 'rightcolumn');">video4</a>

          </div>

       

       

         

          <div class="item">

 

DO YOU KNOW WHY????