Embedded YouTube videos in Html/WebView in NativeScript iOS

1
votes

I am trying to implement embedded YouTube videos in Html/WebView in Nativescript iOS. I was able to get it done on android, as I don't have enough native iOS experience I am posting the question here. I found some links but they deal with native iOS in ObjC and Swift.

How to embed YouTube video on iOs and play it directly on UIWebview without full screen

Can someone guide me to get this done?

Update: Here is the screenshot of Android and iOS that I am getting by using in src of WebView (Android) and html of HtmlView (iOS) -

Android

iOS

1
nativescript

1 Answers

2
votes

To do that you could use NativScript WebView and bind its src property. For example:

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">     
    <GridLayout>
        <WebView src="{{ htmlString }}" height="250" />
    </GridLayout>

</Page>

main-page.js

var observable = require("data/observable");

// Our new Observable view model for data binding
var viewmodel = new observable.Observable({});

// Page loaded      
function pageLoaded(args) {
    var page = args.object;

    viewmodel.set("htmlString", '<iframe width="560" height="315" src="https://www.youtube.com/embed/t1x8DMfbYN4" frameborder="0" allowfullscreen></iframe>');

    page.bindingContext = viewmodel;
}
exports.pageLoaded = pageLoaded;

You could also review this article.