I´m having problem getting the video background to work.
I´m using a vimeo link but the video just won’t start to play. All i get is a black screen.
Here´s an example of a test:
What am I missing?
1 Like
As explained here https://bubble.io/reference#Elements.Page.backdrop_video_source, it should be a link to a file, not to a vimeo video
Sorry…didn´t write that I´ve tried to upload a video with no success and then tried with the vimeo link since I thought I read somewhere that would work. Never mind about the link then.
Is there a maximum size on the mp4 you could upload?
Bubble limits to 50mo the files you can upload, that’s the only limit. It’s a good idea not to have it too big though
How do you configure a Video Background JUST on the top half of the screen?
Can’t use a Group it seems as no option for Video Background.
Yes it has to be at the page level (but you could use a video element as well). If it’s the page, it will he the whole page, but you can hide some sections of the screen with a shape or a group.
How do I use a video element? I have tried but it displays the player on the video.
If anyone has any input as to how I can set a video background up on half of the home page only that would be greatly appreciated. I have tried using a standard video input (youtube) but the youtube player shows on the screen which obviously won’t work for a video background.
Yeah we don’t have a good way to do this, a part from covering some part of the screen with video as a background, which I think is an okay workaround.
Ok. But is there a way to hide the video title for a YouTube video?
Or is there a different service that is better for me to upload my video too for a half page video background?
If you use an HTML element and then copy the embed code of the video from YouTube you can hide the YouTube player features. The play button will not show if you have it set to autoplay. So for example:
Standard copy-pasted YouTube Video Embed Code (I took out the beginning ‘<’ and ‘>’ so it wouldn’t embed in this post):
iframe width=“560” height=“315” src=“https://www.youtube.com/embed/xSupOX-F80w” frameborder=“0” allowfullscreen></iframe
Changed to:
iframe width=“560” height=“315” src=“https://www.youtube.com/embed/xSupOX-F80w?controls=0&showinfo=0” frameborder=“0” allowfullscreen></iframe
That will make it so there is only a play button. Then you can also add autoplay (which hides the play button) by doing:
iframe width=“560” height=“315” src=“https://www.youtube.com/embed/xSupOX-F80w?controls=0&showinfo=0&autoplay=1” frameborder=“0” allowfullscreen></iframe
3 Likes
How do you hide the title of the video though?
What about the stretching across the page?
As long as the original file is uploaded to youtube in high resolution it will stretch across from either side of the monitor and still look good?
Yes, doing that (adding ‘controls=0&showinfo=0’) to the code will hide the title; it will hide everything except the play button. If you add (‘controls=0&showinfo=0&autoplay=1’) then that will make the video automatically play once the page is loaded.
I’m not sure about how you could make it resize. Maybe if you were to put the HTML element in a group that resized? You can manually adjust the height and width in the code. I would check/test that idea now but am on mobile at the moment. I’ll check later definitely!
Here’s a YouTube video without the title and controls that’s responsive in Bubble using an HTML element.
Preview:
https://forum_app.bubbleapps.io/version-test/responsiveyoutube?debug_mode=true
Editor:
I went to this site to get the responsive embed code that I used:
http://embedresponsively.com/
and then I added this to the code to make the video without any titles, without player controls, minimal branding and to make the video loop:
‘?controls=0&showinfo=0&autoplay=1&loop=1&playlist=[VIDEOID]&modestbranding=1’
The loop=1 and playlist=[VIDEO ID] (<–re-enter the video ID, no brackets) parts will make the video continuously loop.
the ‘modestbranding=1’ part will remove the YouTube logo when the video is hovered.
(Make sure the page is not set to fixed-width and this should work :).
3 Likes
Looks good but you can still click and stop/restart the video by just clicking on it.
I’m looking for something as professional as it can be.
Is there not a solution out there without the player and without any control whatsoever so that the video simply plays?
Something like this, akin to Facebook and instagram’s auto-play videos would be awesome.
I agree.
I am shocked that there isn’t a sound solution yet to a half page video background inside Bubble.
From what I was reading regarding the YouTube player, I don’t believe there is a way to disable/hide even further than I already did if you’re going with YouTube. Bubble’s HTML is still a great option because you could use a business video hosting service and embed it using the HTML element in your site.
http://resources.goanimate.com/marketing/8-best-youtube-alternatives-for-business-video-hosting
I have been using the below html element for this.
video width=“320” height=“240” autoplay>
source src=“movie.mp4” type=“video/mp4”>
source src=“movie.ogg” type=“video/ogg”>
Your browser does not support the video tag
/video>
Hi all,
I want a simple, silent video to run on the background of some of my pages. I have tried all the solutions listed here and am still not able to get the background to run. It just shows as a black screen.
The sample (http://vjs.zencdn.net/v/oceans.mp4) when you build the box works perfectly, and is exactly how I want it to appear on the pages. Any other ideas? How is this hosted?
Cheers,
Joseph