Make a YouTube Video Your Website Background

Ok- its already clear that I love Youtube (check out my “Software I’ll Pay For” article), so its only natural that I want to incorporate it in all of my projects. I am a firm believer that you can honestly find anything on Youtube, and cool website backgrounds are no exception. This is a step-by-step guide on creating a React App from scratch and making the background of the site a youtube video.

Great! Now you have an App and you are running your server!

Step 3: Add the video to the body of your index.html file.

autoPlay: this automatically plays your video when someone goes to your site

muted: removes any sound from the video

loop: automatically loops the video

className: we will use this in the css file to format the video so that it is a background video

src: if your file is in the public folder you can simply put the filename here. If it is not in the public folder, you will need to include the file path to the video here.

type: include the file type of the video

Step 4: Add the proper formatting to your App.css file.

Add the following to App.css at the bottom of the file.

The combination of these CSS properties will ensure that your video is centered and fills up the entire screen.

Step 5: Viola!

Some examples:

I like The Beauty of Brewing because its so subtle. You cannot see when the loop begins or ends and it doesn’t take away from the message.

Bellroy is great because even though the video is very active, they made it dark so that it doesn’t distract the user.

Related posts:

Learn how to create your strategic content marketing plan to establish yourself as a thought leader, gain a competitive edge, and drive website traffic.