Skip to content Skip to sidebar Skip to footer
Home / Android / Appcelerator / Video / Webview / Youtube

Embeded Youtube Video To Webview (appcelerator) Doesn't Show (black Screen)

Post a Comment
I try to show YT video in my application (Appcelerator, Android). I found that the best way is to show embeded video in WebView, so I do it with such code: var webView = Ti.UI.crea

Solution 1:

Then you can try this

var Win = Titanium.UI.createWindow({
    title : 'Video View Demo',
    backgroundColor : '#fff'
});
var video_url = 'https://www.youtube.com/watch?v=bSiDLCf5u3s';
var movie = '<html><head></head><bodystyle="margin:0"><embedid="yt"src="' + video_url + '"type="application/x-shockwave-flash"width="480"height="266"></embed></body></html>';


var webView = Ti.UI.createWebView({
    top:0,
    left:0,
    width:480,
    height:266,
    url:video_url,
    html:movie
});

Win.add(webView);
Win.open();

Solution 2:

You can call the device default youtube app to open the url for the user. See the below code 

varWin = Titanium.UI.createWindow({
    title : 'Youtube Video View Demo',
    backgroundColor : '#fff'
});
var button = Titanium.UI.createButton({
   title: 'Hello',
   top: 10,
   width: 100,
   height: 50
});
button.addEventListener('click',function(e)
{
   Titanium.Platform.openURL('https://www.youtube.com/watch?v=bSiDLCf5u3s');
});
Win.add(button);
Win.open();

Thanks.

Solution 3:

I found that embedded videos wouldn't work on Android, while doing fine on iOS. However switching form using the webviews url property to load the video, to using the setHtml() function works. The way to do this is by using the Youtube iframe api. 

var videoUrl = 'https://www.youtube.com/embed/' + videoId + '?    autoplay=1&autohide=1&cc_load_policy=0&color=white&controls=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0';
var playerWidth = $.youtubeWebView.width;
var playerHeight = $.youtubeWebView.height;
var html = '<iframe id="player" type="text/html" width="'+playerWidth+'" height="'+playerHeight+'" src="'+videoUrl+'" frameborder="0"></iframe>';
$.youtubeWebView.setHtml(html);

Heads up, iframes can be a pain, add this in the load event to get rid of the wierd white padding on the top & left side

this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');

Something like this:

$.youtubeWebView.addEventListener('load', function(){
    this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');
    var showYoutubeTimer = setTimeout(function() {
        $.activityIndicator.hide();
    $.youtubeWebView.opacity = 1;
    clearTimeout(showYoutubeTimer);
    }, 300);
});

Post a Comment for "Embeded Youtube Video To Webview (appcelerator) Doesn't Show (black Screen)"