Responsive or full screen video

I love that I can make an image the background of a page. I know there isn’t an option to have background videos but is there a work around to get a full screen video that autoplays? I am just wanting a welcome video to show within the app before moving to the home page.

1 Like

@jaronhumiston you can use the YouTube component in marketplace, make it fullscreen and enable video auto play.

Add a button on top of it to go to next screen or once the video is completed.

Update: you can use opacity to make it feel like it’s in the background.

So i tried that! But it looks weird depending on the screen size. and even with autoplay enabled, it doesnt automatically start…

So I tried with Plyr. I stretched the video to cover the page and made it a group. I also fixed it to the top. It seems like it works. The issue is only with the 3 iPhone 11s. I wonder if the issue is present in reality? I do not have any of the 3 iPhone 11s to test it.




Ok, Ill try it with Plyr! What was your reasoning for making it a group?

I didn’t find other way to fix it to the top / bottom which is needed in order to make it fullscreen

So i figured out how to get a full screen, background video to autoplay with some html coding and the web view component.
ezgif.com-gif-maker

The issue I am having is that while the video plays there is no audio. Anyone know why this is happening or a way to make the audio work?

5 Likes

So I can see that the video on iphone 11 PRO is under the notch in your webview. I didn’t know that you would have been happy with that. In this case this is pretty easy to achieve. Simply add the plyr video to the screen and make it full screen. Make it a group and fix it to the bottom. Make the screen background black and hide status bar. Of course you can hide the controls, make autoplay etc. Result:

ps:

You can also store the video in the database. I created a collection called App Assets and added a field : file. I uploaded the video > right click > copy link address > and there you have the URL of the video

2 Likes

Awesome! I made that happen and it is exactly what I wanted. Only problem is I have autoplay turned on but it doesn’t start on its own. Am I doing something wrong? Will it not work in the web app preview?

1 Like

That must be due to your browser settings, cache or similar. When I first did the test, my autoplay didn’t work, however I was using incognito window. I tested in normal browser and it worked with no problem. I assume that it would work once the app is built, however I did not test it.

How do i make the button appear after the video?

1 Like

Am i doing something wrong that my video isn’t staying full screen on certain pages?
Screen Shot 2021-01-31 at 4.03.11 PM

Is that the webview or plyr? Did you make plyr a group and fixed it to bottom? I tested it in my end again and its fullscreen on all devices for plyr so not sure what is missing on your end

that is plyr made into a group and set to the bottom.

What else do you have on the page? Is the text “skip” added on top of the video? Is that a text or button?

Update: I added the button to the page and it seems like that’s what’s causing the issue.

I got it for you. You need to ungroup plyr and make a new group together with the button and fix to bottom.

1 Like

This is so fantastic :star_struck: :star_struck: :clap:, I’m still curious about how it was accomplished by @Edward and @jaronhumiston , still trying to figure how to setup as I’m trying to accomplish something similar (using plyr ),I tried plyr component multiple times over the past 2 weeks, but can’t get it looking as nice as you guys, so just just double-checking before I go down that rabbit hole( is web-view being used at all here?, no html coding needed right? – sorry for being late to the party, I might’ve missed out on a few critical points )

So I created a collection that has all of my media in Adalo. This collection houses the uploaded video file.

I then have added the Plyr video object to the screen and resize it to fit the screen. Then I changed all the options to only show the large play button. I get the video url from the media collection I created.

I have an invisible timer that is set to 1 second longer than the video length and the option on that is set to go to a page once timer is reached. In addition I have a button that can skip the video and that is just a link to the page I want.

Im still unable to get the video to autoplay but trying to figure that out.

1 Like

Ok, this is frustrating now because I already had everything in a group and set to the bottom…still having the issue. Ive tried on the web app and on teh preview with 2 different browsers and still get the same result across them all!

1 Like

OMG thanks for providing the extra information @jaronhumiston :trophy: :trophy: , I can’t thank you enough for helping me!!! its an area with little information readily available, so your input is worth gold !!! if i can’t wade out this quagmire, il’l end up paying you for a tutorial :wink: