<Script runBeforeMount={true} :dependencies={[data.url, data.aspectRatio, data.autoplay, data.controls]} :as="player">
    function getId(input) {
        const embed = input.match(/embed\/([A-Za-z0-9_-]{11})/);
        if (embed) return embed[1];

        const short = input.match(/youtu\.be\/([A-Za-z0-9_-]{11})/);
        if (short) return short[1];

        const watch = input.match(/[?&]v=([A-Za-z0-9_-]{11})/);
        if (watch) return watch[1];

        return input.trim();
    };

    const id = getId(data.url);
    
    let embedUrl = `https://www.youtube.com/embed/${id}?rel=0&playsinline=1`;
    embedUrl += "&autoplay=" + (data.autoplay? 1 : 0);
    embedUrl += "&controls=" + (data.controls? 1 : 0);

    const style = { width: "100%", aspectRatio: data.aspectRatio };
</Script>
<Box bg="black">
    <WebView
        source={{ uri: player?.embedUrl }}
        style={player?.style}
        allowsInlineMediaPlayback
        javaScriptEnabled
        domStorageEnabled
        mediaPlaybackRequiresUserAction={false}
    />
</Box>

{
  "url": "https://www.youtube.com/watch?v=b8bzk9TJEOY",
  "aspectRatio": "16/9"
}