Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-3515

Cannot disable scroll in webview containing embeded YouTube video

    Details

      Description

      {html}<div><p><strong><em>Problem</em></strong></p>
      <p>When embedding a YouTube video there is no way to disable
      scrolling within the webview.</p>
      <p><strong><em>Test Code</em></strong></p>
      <p>Adding this to your html should disable scrolling, and does
      unless the html content is the embed code from YouTube:</p>
      <pre>
      <code><html>
      <head>
      <script type="text/javascript">document.addEventListener("touchmove", touchHandler, false);function touchHandler(e) { if(e.touches.length == 1) { e.preventDefault(); } }</script>
      <style type="text/css">div#test { background: #ca0000; height: 495px; width: 680px; }</style>
      </head></code>
      </pre>
      <p>Here is complete testing code:<br></p>
      <pre>
      <code>var win = Titanium.UI.createWindow();

      var default_video_html = '<html><head>
      <script type="text/javascript">document.addEventListener("touchmove", touchHandler, false);function touchHandler(e) { if(e.touches.length == 1) { e.preventDefault(); } }</script>
      <style type="text/css">div#test { background: #ca0000; height: 495px; width: 680px; }</style>
      </head><body><object width="680" height="495" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param value="http://www.youtube.com/v/[videoid]&amp;autoplay=1" name="movie"><param value="transparent" name="wmode"><param value="true" name="allowfullscreen"><embed width="680" height="495" allowfullscreen="true" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/b661ovU1rPU&amp;autoplay=1"></object></body></html>';

      var web_videobox = Ti.UI.createWebView({ height: 510, width: 690, backgroundColor:'#000000', html: default_video_html });

      win.add(web_videobox);
      win.open();</code>
      </pre>
      <p>Replace the youtube object with any other html and you will see
      that scrolling is disabled.</p>
      <p>May need to be tested on device. Specifically iPad</p>
      <p><strong><em>Ticket Reference</em></strong></p>
      <p><a href=
      "http://support-admin.appcelerator.com/display/EMP-64323-566">http://support-admin.appcelerator.com/display/EMP-64323-566</a></p></div>{html}

        Attachments

          Activity

            People

            • Assignee:
              srahim Sabil Rahim
              Reporter:
              aleard Alan Leard
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-3011
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration