Position video at center of screen

[phillipcmittmann]

Its is possible? I tried using the usual ways to get it but none worked. Im developing for Smart TVs and mobile using ReNative, so I will adjust the layout as needed. (Looks like flexbox doesn't work on RN-Web for whatever reason)

import React from 'react';

import {
    SafeAreaView,
    Dimensions
} from 'react-native';

import { StyleSheet } from 'renative';

import YoutubePlayer from "react-native-youtube-iframe";

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

const PlayerScreen = () => {
    const styles = StyleSheet.create({
        container: {
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            backgroundColor: 'black'
        }
    });

    return (
        <SafeAreaView style={styles.container}>
            <YoutubePlayer
                height={SCREEN_HEIGHT}
                width={SCREEN_WIDTH}
                play={true}
                videoId={"iee2TATGMyI"}
            />
        </SafeAreaView>
    )
}

export default PlayerScreen;

EDIT: Also, it seems that I can't bind a key to start the player via react-spatial-navigation

[LonelyCpp]

If your trying to get the player to stretch full height, try this

• get screen dimensions from Dimensions
• set this as the iframe height, width
• unset the default aspect ratio with this : https://github.com/LonelyCpp/react-native-youtube-iframe/issues/13#issuecomment-611753123

[phillipcmittmann]

Changed the code to like you said, still no changes in the layout.

import React, { useEffect } from 'react';

import { Dimensions, View } from 'react-native';

import { withFocusable } from '@noriginmedia/react-spatial-navigation';
import YoutubePlayer from "react-native-youtube-iframe";

import { hasWebFocusableUI } from '../config';

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

const Player = (props) => {
    if (hasWebFocusableUI) {
        useEffect(() => {
            props.setFocus();
        }, []);
    }

    console.log(`${SCREEN_WIDTH} ${SCREEN_HEIGHT}`)

    return (
        <View>
            <YoutubePlayer
                height={SCREEN_HEIGHT}
                width={SCREEN_WIDTH}
                play={true}
                videoId={"iee2TATGMyI"}
                webViewProps={{
                    onMessage: () => null,
                    injectedJavaScript: `
                      var element = document.getElementsByClassName('container')[0];
                      element.style.position = 'unset';
                      true;
                    `,
                }}
            />
        </View>
    )
}

export default (hasWebFocusableUI ? withFocusable()(Player) : Player);

[phillipcmittmann]

I ended up by changing to ReactJS instead of react-native-web for Tizen and WebOS. Will do some tests for Android TV and tvOS.