Embed Video Component

Hi!

I’m trying to embed a video and manage the size. I can’t make it happen. I tried using both Web Content and Embed Content native React Studio elements.

When I use the “Web Content” element and paste the video URL in the URL input, this is how it renders on the screen preview:

and this is how it comes out in the browser:

And when I use the “Embed Content” it appears properly only if I use the embed height and width, if I change it to try to make it bigger, it goes down to thumbnail size.

Here’s the Embed element in the screen workspace:

Here’s using the iframe code that comes with the “embed” option of the video.

And here’s how it looks when I change the height and width in the iframe to make it bigger:

Any suggestions, fixes, plugins, ideas welcome!!

Thanks for such an awesome tool! React Studio is great!

Hi,

Anything embedded is something we don’t have any control. Youtube may prevent embedding or change how the content looks just way they want. The preview image is just a screenshot created with headless browser which is just a lucky “guess” how it could look.

You should probably try to create a plugin for embedding video elements. Maybe something like this: https://s3.amazonaws.com/sc.neonto.com/example_projects/ReactPlayer.plugin.zip . It’s just a demo plugin which wraps this npm package: https://www.npmjs.com/package/react-player into plugin. Note that plugin’s video element’s height is fixed so you need to set the height in Studio for each screen size.

1 Like

Hi! thanks for the reply, I’ll try using the plugin you shared, I don’t know how to make plugins though, I’ll read the documentation. Thanks!

Edit: That plugin for React Player worked great!!! I see that the structure looks a lot like the example code in for the create-new-plugin option. Unfortunately I’m not an expert developer (hence why I like React Studio so much), but I do know how to work with npm packages. If making plugins from npm packages is not so hard, could someone make a video tutorial for YouTube on how to do it?

That way I (and others I guess) will be able to make plugins and share them with others in the plugin store.

Anyways, thanks again for the React Player plugin, it’s just what I needed.

1 Like

This react player plugin does work great! Just download the plugin @Antti_Neonto posted then -> click “Plugins” (top menu) -> show plugins folder -> copy and past the file you just downloaded -> come back to react studio and click “Plugins” (top menu) -> click “Reload Plugins” -> it will be in your components menu now. Just drag that on and paste in the youtube URL you want to stream. This worked for me.