Embeded youtube iframe breaks screen scrolling experience. When user touch the iframe area trying to scroll nothing happens, cause iframe intercepts touch event and sencha scrolling engine is not able to handle touch event.
Put the Youtube.js
file from the src folder into app/component
folder of the application. Fix the namespace of the component in the first line of Youtube.js
by renaming AppName
to the real name.
Add jquery
dependency (should be removed in future versions) by adding following code in app.json
file into js
array:
{
"path": "jquery.js",
"update": "delta"
},
Embed YouTube iFrame JavaScript API by adding the following function to the app.js
and call this.addYoutubeApi()
in launch
function:
launch: function() {
// Add YT JS API
this.addYutubeApi();
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('YtVideosDemo.view.Main'));
},
addYoutubeApi: function() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function () {
console.log('youtube api loaded');
window.youtube_iframe_api_ready = true;
}
},
window.youtube_iframe_api_ready
is used by component to make sure API has been successfully loaded.
Add reference to the video component in the view where videos are going to be used, replace AppName
with a real name:
requires: [ 'AppName.component.Youtube' ]
Put the video component in your views layout using template:
{
xtype: 'youtube',
thumb: 'resources/images/[email protected]',
youtube_id: 'KIMCR0BQndM',
width: 304,
height: 190
}
Parameters:
thumb
is used to set the thumbnail for the video, if not set default YouTube thumbnail is used.
youtube_id
- YouTube video id which is used in videos URL.
Add styles for the play button to resources/sass/app.scss
:
.x-youtube {
&:after { content: '';
display: block;
position: absolute;
width:100%;
height:100%;
background: url('../images/[email protected]') no-repeat center;
background-size: 58px 58px;
}
&.x-youtube-overlay {
&:after { background-color: rgba(0,0,0,0.5);
}
}
&.x-youtube-loading {
&:after { background-image: none;
}
}
iframe { border: 0;
}
}
After all of these finished you can build sencha project and wrap it with cordova. Please reference demo project for example.
In demo
folder two projects are available sencha
(2.2) and cordova
(2.7). Sencha app is build for production and copied to demo/cordova/www
folder. So to test things out launch the cordova project and run app in simulator.
This component uses YouTube iFrame JavaScript API and with a bunch of hacks doing a pretty good job on the iPhone. For the Android I would recommend to use YouTube Android API.
-
The component is based on Senchas
Ext.Img
class which provides a basis for video thumb and shows play button overlay. -
When user taps on thumb, iframe is added to DOM, shown and video starts playing. To make this autoplay feature possible we use YouTube iFrame JavaScript API.
-
After video ends/stops/paused iframe is resized to the 10px box and hidden under play button overlay. This part is important and tricky, I've tried to hide, delete iframe and some other options, but ended up with resizing. It allows to continue playing after pause and have a few youtube iframes on the same page with no issue. Video can be resized only once, cause after second play tap player goes into fullscreen mode and user don't see the iframe itself.
- Add reference and code to support Android YT API.
- Make component namespace independent.
-- Alexander Kravets @ Slate, May 2013