Making the YouTube JS API work with iOS, dealing w

Question

I'm working with the JS API for YouTube and for displaying the video player, use of embedSWF is recommended by Google in the documentation, like this:

  <script type="text/javascript" src="swfobject.js"></script>    

  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3","ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

While this works fine on my computer and Android devices, on iOS the ytapiplayer div does not turn into an embedded player but instead just displays its original contents, i.e. the error message saying Flash player 8+ and JS are required.

Is it possible to get my this working on iOS? If so, how?

Thanks in advance!

Answer 1

I did this exact thing a few months ago for a project...

Javascript, very similar to what you have:

<script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
                flashvars.youTubeVideo = "VitQwgsBq-w";
                flashvars.controllerAlign = "top";
                flashvars.queTo = "0";
                flashvars.controlBarAlpha = ".3";
            var params = {};
            var attributes = {};
                swfobject.embedSWF("images/youTubeLoader.swf", "youTubeDiv", "250px", "200px", "9.0.0", false, flashvars, params, attributes);
</script>

What swfobject.js is going to do is look for an HTML div named "youTubeDiv" and replace all of it's contents with an SWF youtube player

(i did this b/c the iframe solution had z-index issues with an HTML5 project i was working on)

Now the HTML:

    <div id="youTubeDiv">
            <iframe width="250px" height="200px" src="http://www.youtube.com/embed/VitQwgsBq-w" frameborder="0" allowfullscreen></iframe>
    </div>

Answer 2

Maybe you should try new YouTube iframe Player API? https://developers.google.com/youtube/iframe_api_reference

It works with mobile devices without thinking about Flash. Embedding example:

<script type="text/javascript" src="//www.youtube.com/iframe_api"></script>

function onYouTubePlayerAPIReady() {
    var videoBox = document.getElementById('video1');
    videoBox.ytplayer = new YT.Player(videoBox, {
        videoId: 'kXDiGtgPL6E',
        playerVars: {
            //controls: 0,
            wmode:'transparent'
        },
        height: '200',
        width: '320'
    });
}