Embed Video Component


#1

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!


#2

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.


#3

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.