Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Displaying YouTube Videos

Page of 168

You can play YouTube videos from your app by outputting their embed code into a Sencha Touch component. As illustrated below, the embed code is located in the Share block, located underneath each video on YouTube.com.

The embed code for a YouTube Video

If you plan to use YouTube as your video provider, we suggest wrapping the embed code in a custom class as illustrated by the following example:

Ext.define('MyApp.view.YouTubePlayer', {
 extend: 'Ext.Component',
 alias: 'widget.YouTubePlayer',

 config: {
  url: 'http://www.youtube.com/embed/',
  videoId: 'qsvpvqvApKo',
  vWidth: 420,
  vHeight: '315',
  styleHtmlContent: true
 },

 initialize: function() {
  
  this.callParent(arguments);

  var out = Ext.String.format(
   [
    '
', '<iframe width="{0}" height="{1}" src="{2}{3}"', 'frameborder="0" allowfullscreen></iframe>', '
' ].join(''), this.getVWidth(), this.getVHeight(), this.getUrl(), this.getVideoId() ); this.setHtml(out); } });
Page of 168
comments powered by Disqus