Is it possible to launch fullscreen?

[MorganeAlinai]

Hi,

For UX reasons, I would prefer the video to launch full screen. I'm displaying videos that would not really be interesting if not full screen.

I'm currently using React Native Youtube for that but it has some issues, like the fact that it is impossible to partially cover the video. I would happily switch to React Native Youtube Iframe if I can launch full screen by default.

Regards

[LonelyCpp]

Hi @MorganeAlinai
Unfortunately it is possible only on ios - #19 (comment)

On android, the player can only be put into true fullscreen mode by user tapping on the fullscreen button.

Although you can try to emulate a fullscreen experience

• push a screen which has only a view and the player on it
• set the player width and height to match the screen height and width. (note: player width = screen height)
• rotate the view by 90 degrees to make the player horizontal

[LonelyCpp]

here's a simple snippet to achieve this -

import React, { useEffect, useState } from "react";
import { Dimensions } from "react-native";
import { View } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

export default function App() {
  return (
    // rotate by 90 deg for horizontal video
    <View style={{ transform: [{ rotate: "90deg" }] }}>
      <YoutubePlayer
        videoId={"XSqi5s3rfqk"}
        // video height -> screen width
        height={SCREEN_WIDTH}
        // video width -> screen height
        width={SCREEN_HEIGHT}
        // prevent aspect ratio auto sizing
        webViewProps={{
          injectedJavaScript: `
            var element = document.getElementsByClassName('container')[0];
            element.style.position = 'unset';
            element.style.paddingBottom = 'unset';
            true;
          `,
        }}
      />
    </View>
  );
}

[MaheshGawhane11]

@LonelyCpp Using above code it doesn't match to fullscreen. Its showing in center with small size.