Unrecognized feature: 'picture-in-picture'

[mxignas]

Hi, my videos cant be played, im getting this error:

chromium: [INFO:CONSOLE(629)] "Unrecognized feature: 'picture-in-picture'.", source: https://www.youtube.com/s/player/1c732901/www-widgetapi.vflset/www-widgetapi.js (629)

Is this youtube problem? Maybe its possible to turn off PIP?

[triniwiz]

This should not prevent your videos from playing , are the videos private ?

[mxignas]

Videos are not private, I can press play, but then in the app it says: "An error occured. pleasy try again later. (Playback ID: ...) Learn More"

error i mentioned in the first comment appears not when pressing play but when I just insert: <YoutubePlayer id="player" src="Ml9pyQr7Cgc" apiKey="MY_API" height="800px" width="100%"/>

Thats it. it doesnt matter with that videos i try.

[triniwiz]

There have you check this event on(eventNames: 'error', callback: (args: YoutubePlayerErrorEvent) => void, thisArg?: any);?

[mxignas]

Sorry im not too good at ts and for this app im using Vue, could you help me where and how i need to use this event?

[triniwiz]

You can bind to it from the view element

[mxignas]

Still sorry, how should i use it in this context?

<template>
    <Page actionBarHidden="true" backgroundSpanUnderStatusBar="false" class="mainBackground">
        <GridLayout>
            <YoutubePlayer id="player" src="Ml9pyQr7Cgc" apiKey="my_api" height="800px" width="100%"/>
       </GridLayout>
    </Page>
</template>

<script>
  export default {
    data () {
      return {

      }
    },
    methods: {

    }
  };
</script>

this is my first project, sorry

[triniwiz]

Ok I understand

<YoutubePlayer @error="onError"

[mxignas]

Still everything remains the same as described and no error info is shown

[triniwiz]

Should be good in 4.0.4

[mxignas]

Unfortunately... the same

[triniwiz]

@mxignas it's now videoId not src as of v4 please see the doc

[Whip]

Same thing here on 4.1.4 using plain js. Here's my code:

XML

<ui:YoutubePlayer id="player" videoId="{{ youtubeVideo }}" height="{{ widthFull/1.87 }}" width="100%" onError="onError" />

JS

export function onError(e) {
  console.log(e);
}

Edit: Actually it works for me if the video id is hard coded but when I'm using a binding context and loading the video, then it doesn't work. This is the code

let viewModel = new fromObject({
  widthFull: Screen.mainScreen.widthDIPs,
  youtubeVideo: ""
});

export function onLoaded(args) {
   Http.request({
      url: config.apiUrl+"/get"
      method: "POST",
      headers: { "Content-Type": "application/json" },
      content: JSON.stringify({
        auth: config.apiAuth,
        table: "brand",
      })
   }).then(function(request){
      var response = JSON.parse(request.content);
      viewModel.youtubeVideo = response.data;

   }, function(error){
        console.log(JSON.stringify(error));
   });
}