CODEWITHSUNDEEP
videoreact-native
Greg
Greg

Reputation: 1402

Vimeo or Youtube video in React Native

My API returns either Vimeo or Youtube URLs but I haven't been able to display them in my app. The react-native-video component only displays video files, not links.

I'm aware of the react-native-youtube component but I have video URLs from different sources...

There's a possibility to also load the iframe element but so far no success:

<Iframe url="item.videos" />

item.videos:

<div class="embedded-video"> <div class="player"> <iframe class="" width="640" height="360" src="//www.youtube.com/embed/VH69LURiYYs?width%3D640%26amp%3Bheight%3D360%26amp%3Bautoplay%3D0%26amp%3Bvq%3Dlarge%26amp%3Brel%3D0%26amp%3Bcontrols%3D1%26amp%3Bautohide%3D2%26amp%3Bshowinfo%3D1%26amp%3Bmodestbranding%3D0%26amp%3Btheme%3Ddark%26amp%3Biv_load_policy%3D1%26amp%3Bwmode%3Dopaque" frameborder="0" allowfullscreen></iframe> </div> </div>

This leads into: expected component class, got [object] [object]

Please tell me there's another way to display videos, or is the end near? :(

Upvotes: 0

Views: 2903

Answers (1)

JayGarcia
JayGarcia

Reputation: 200

Your pattern is completely wrong. You can't embed HTML inside of an element parameter. Things don't work that way.

Why not develop a simple Single-page app that allows you to leverage Vimeo and Youtube content full screen like react-native-youtube does? Look under the hood. It's really not that complex.

See: https://github.com/inProgress-team/react-native-youtube/blob/master/Assets/YTPlayerView-iframe-player.html

Upvotes: 2

Related Questions