Search code examples
pythonpycharmbackgroundkivy

How to add a background video in Kivy


I am new to Kivy and I am sort of stuck. I am using GridLayout to make my app and I am having some trouble putting a video in my background. The code I will post makes an app with a black background. How do I replace the black background with a video, particularly mp4. I would also like to make the video darker if possible. I wanted to use AnchorPoint but I am not quite sure how to put both in there. Any help will be appreciated.

from kivy.app import App
from kivy.uix.video import Video
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.button import Button
from kivy.uix.textinput import TextInput

class MZ_Invest(App):
    def build(self):
        self.root_layout = FloatLayout()
        self.window = GridLayout()
        self.window.cols = 1
        self.window.size_hint = (0.6,0.7)
        self.window.pos_hint = {"center_x":0.5, "center_y":0.5}
        #add widgets

        #Video
        video = Video(source='birds.mp4', state='play')
        video.opacity = 0.5


        #Image
        self.window.add_widget(Image(
            source="mzi.png",
            size_hint = (1.5,1.5)
        ))

        #Label
        self.greeting = Label(
            text="How much would you like to invest?",
            font_size = 18,
            color='90EE90'
        )
        self.window.add_widget(self.greeting)

        #User Input
        self.user = TextInput(
            multiline=False,
            padding_y= (20,20),
            size_hint = (1, 0.5)
        )
        self.window.add_widget(self.user)

        #Button
        self.button = Button(
            text="Submit",
            size_hint = (1,0.5),
            bold = True,
            background_color = '90EE90',

        )
        self.button.bind(on_press=self.callback)
        self.window.add_widget(self.button)

        #self.root_layout.add_widget(video)
        self.root_layout.add_widget(self.window)

        return self.root_layout

    def callback(self, instance):
        if self.user.text.isnumeric() and int(self.user.text) >= 10000:
            self.greeting.text = "Calculating: $" + self.user.text
            self.greeting.color = '90EE90'
        else:
            self.greeting.text = "Invalid"
            self.greeting.color = "#FF0000"

if __name__ == "__main__":
    MZ_Invest().run()

Solution

  • Most Kivy widgets have a transparent background, so you can just display a video and then display your GUI over that. Try adding something like this at the end of your build() method:

        self.root_layout = FloatLayout()
        video = Video(source='BigBuckBunny.mp4', state='play')
        video.opacity = 0.5  # adjust to make the video lighter/darker
        self.root_layout.add_widget(video)  # add the video first
        self.root_layout.add_widget(self.window)  # now add the GUI window so it will be drawn over the video
    
        return self.root_layout  # return the root_layout instead of the window