title: Using video.js to play video inline on ios?
body: <p>I am trying to use video.js to maintain a consistent video skin across all platforms. The below code works for everything (chrome, firefox, ie, android) but safari on ios (haven't tested desktop version of safari). When attempting to play the video ios kicks over to it's default video player (quicktime?). This is a problem because I am looking to remove the video controls from the skin so that the user must watch the video. Is there a way to use video.js or another web plugin to be able to have a consistent video player UI across all platforms or will this not be possible for ios?</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;!--#include virtual="/assets/inc/headcontent.htm" --&gt;
  
  
    &lt;link href="http://vjs.zencdn.net/5.3.0/video-js.css" rel="stylesheet"&gt;
  
    &lt;!-- If you'd like to support IE8 --&gt;
    &lt;script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="row"&gt;
  
          &lt;div class="col-xs-12 col-md-10 col-lg-8"&gt;
  
              &lt;div class=""&gt;
                  &lt;video id="the_video" class="video-js" controls preload="auto"&gt;
                      &lt;source src="videos/english.mp4" type='video/mp4'&gt;
                      &lt;p class="vjs-no-js"&gt;
                          To view this video please enable JavaScript, and consider upgrading to a web browser that
                          &lt;a href="http://videojs.com/html5-video-support/" target="_blank"&gt;supports HTML5 video&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/video&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;!--#include virtual="/assets/inc/footcontent.htm" --&gt; 
  
  
    &lt;script src="http://vjs.zencdn.net/5.3.0/video.js"&gt;&lt;/script&gt;
  
  
    &lt;script&gt;
  
      var player = videojs("the_video", {}, function(){
        // Player (this) is initialized and ready.
      }).ready(function(){
  
          console.log(this.options()); //log all of the default videojs options
  
         // Store the video object
        var myPlayer = this, id = myPlayer.id();
        // Make up an aspect ratio
        var aspectRatio = 264/640; 
  
        function resizeVideoJS(){
          var width = document.getElementById(id).parentElement.offsetWidth;
          myPlayer.width(width).height( width * aspectRatio );
  
        }
  
        // Initialize resizeVideoJS()
        resizeVideoJS();
        // Then on resize call resizeVideoJS()
        window.onresize = resizeVideoJS; 
      });
  
  
    &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>