Embeded Youtube video to WebView (Appcelerator) doesn't show (black screen)

Question

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.createWebView({
   url: 'https://www.youtube.com/embed/LTRfmqc0KBg',
   enableZoomControls: false,
   scalesPageToFit: true,
   scrollsToTop: false,
   showScrollbars: false
});

but video does not load (I see only black screen - instead of webview's white). WebView works properly because it shows other pages.

We found a number of issues with this approach and eventually abandoned it. We went back to using the video player that is native to Appcelerator. I think you may find that the URL you are using is incorrect. Although you would use this when viewing videos yourself it is not suitable for embedding in an application. We ended up using the Youtube api to get the raw url for the video embedded in Youtube. Eventually we abandoned this because we did not want the advertising content that Youtube pastes over the top. — theThought, Jan 20 '16 at 16:05
So what is your answer, because you wrote me some suggestions and at the end you stated that all of them were wrong... — kreatywny, Jan 20 '16 at 23:51

score 2 · Answer 1 · answered Jan 21 '16 at 11:09

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><body style="margin:0"><embed id="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();

When I play video it says "video is unavailable" – Vishal Rabadiya Aug 20 '18 at 05:57 — Vishal Rabadiya, Aug 20 '18 at 05:57

score 0 · Answer 2 · answered Jan 21 '16 at 10:51

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

var Win = 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.

Thank you Sharif but it opens video in a browser/YT app. I want to show the video inside the app, not outside... — kreatywny, Jan 21 '16 at 11:00

Out of Orbit · Answer 3 · 2016-02-29T15:09:24.170

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);
});

Embeded Youtube video to WebView (Appcelerator) doesn't show (black screen)

3 Answers3

Linked