javascript - 動画は iOS および Android バージョンのモバイル デバイスでは再生されませんが、ウェブページでは再生されます

Question

以下のjavascriptコードを作成して、ビデオをポップアップとして Web ページにロードしました。ビデオはブラウザーで完全に正常に読み込まれ、再生されますが、いくつかの問題により、モバイル デバイスでは再生されません。

同じコードを添付します。

 var bodyLightBox = document.getElementById("bodyLightBox");
 var modalBoxWapper = document.getElementById("modalBoxWapper");
 var modalBox = document.getElementById("modalBox");
 var pageBody = document.getElementById("body");

 var videoWrapper = document.getElementById("videoWrapper");

 var currCont ="";
 var boxHeight = document.body.clientHeight;

 var videoCont ="";


 function openModalBox(conId, divWidth){    
     contDiv = document.getElementById(conId);
     currCont = contDiv;

     bodyLightBox.style.display="block";
     bodyLightBox.style.height = boxHeight+"px";

     modalBoxWapper.style.display="block";
     modalBox.style.width = divWidth;
     currCont.style.display="block";

     pageBody.style.overflow="hidden";
 }

 function closeModalBox(id){    
     bodyLightBox.style.display="none";
     modalBoxWapper.style.display="none";
     currCont.style.display="none";
     pageBody.style.overflow="auto";     
 } 

 function openVideoModalBox(divID, videoTitle, videoURLID, videoDivWidth){

     bodyLightBox.style.display="block";
     bodyLightBox.style.height = boxHeight+"px";

     modalBoxWapper.style.display="block";
     modalBox.style.width = videoDivWidth;  

     createVideoWrapper(divID, videoTitle, videoURLID);
     //alert(divID);
     videoCont = document.getElementById(divID);
     videoCont.style.display="block";

     pageBody.style.overflow="hidden";
 }

 function closeVideoModalBox(id){   
     bodyLightBox.style.display="none";
     modalBoxWapper.style.display="none";
     videoCont.style.display="none";     
     pageBody.style.overflow="auto";

     removeDiv(videoWrapper, id);
 }

function createVideoWrapper(divID, videoTitle, videoURLID){

     var div = document.createElement('div');
     videoWrapper.appendChild(div);
     div.setAttribute('id', divID);
     div.styly ='display: none;';

     var titleDiv = document.createElement('div');
     div.appendChild(titleDiv);
     titleDiv.setAttribute("className", 'topBar'); // className use for ie7
     titleDiv.setAttribute("class", 'topBar');  // this worked all
     titleDiv.innerHTML='<div class="modalBoxtitle" id="modalBoxtitle">'+videoTitle+'</div><div class="closeBtn" onclick="closeVideoModalBox('+divID+')">X</div><div style="clear: both;"><!--  --></div>';

     var videoCont = document.createElement('div');
     div.appendChild(videoCont);
     videoCont.setAttribute("className", 'video_contWapper'); // className use for ie7
     videoCont.setAttribute("class", 'video_contWapper');  // this worked all
     videoCont.innerHTML='<object type="application/x-shockwave-flash" height="480" width="640" data="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0"><param name="movie" value="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed height="480" src="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" id="ytplayer01"></embed></object>';
    //videoCont.innerHTML='<iframe width="640" height="480" src="http://www.youtube.com/v/'+videoURLID+'?autoplay=1&amp;hl=en_GB&amp;version=3&amp;rel=0" frameborder="0" allowfullscreen><!--  --></iframe>';

     var emptyDiv = document.createElement('div');
     div.appendChild(emptyDiv);
     emptyDiv.style.clear="both";
     emptyDiv.innerHTML="<!--  -->";
 }

// remove video div
function removeDiv(parent, child){
        parent.removeChild(child);
    }

解決策を待っています。