CODEWITHSUNDEEP
vue.jsnativescriptnativescript-vue
Nitish Kumar
Nitish Kumar

Reputation: 6276

nativescript-youtubeplayer toggle fullscreen in nativescript-vue app

I'm trying to do a fullscreen in youtube player from the plugin triniwiz/nativescript-youtubeplayer in my nativescript-vue application on android device but I'm unable to achieve so.

I have following code:

<template>
    <Page actionBarHidden="true" class="page" >
        <GridLayout orientation="vertical" width="100%" height="100%" columns="*" rows="*,auto">
            <StackLayout col="0" row="0" backgroundColor="#f8f8f8">
                <StackLayout backgroundColor="#44557f">
                    <Label :text="name" class="font-weight-bold"
                           color="#FFFFFF" padding="15" fontSize="20" textWrap="true"></Label>
                </StackLayout>

                <ScrollView orientation="vertical" height="100%">

                    <ScrollView orientation="vertical">
                        <StackLayout class="home-panel">
                            <YoutubePlayer ref="player" :src="videoLink.substring(17)" apiKey="**********" isFullScreen="true"/>
                        </StackLayout>
                    </ScrollView>
                </ScrollView>
            </StackLayout>
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        props: ['videoLink','name','id'],
        mounted() {
            let player = this.$refs.player
            player.toggleFullscreen();
        }

    }
</script>

But I'm getting an error stating

toggleFullscreen() not found

Upvotes: 0

Views: 251

Answers (1)

Manoj
Manoj

Reputation: 21908

When you access an element via Ref, the return value will be a Vue element. You should access the nativeView to gain access to the actual element.

<script>
    export default {
        props: ['videoLink','name','id'],
        mounted() {
            let player = this.$refs.player.nativeView;
            player.toggleFullscreen();
        }

    }
</script>

Upvotes: 1

Related Questions