Here’s a simple tutorial to create a dynamic background in minutes:Like a background image, but with more flair.
Step 1.
Create your Rails applicationFor this demo, I’ll making a basic application without a database.
I’ve added the postgresql flag here if you’re creating an actual app with data, but for the sake of the video banner, it’s completely optional.
rails new video-demo –database=postgresql rails db:create #necessary because of PostgreSQLThe next step is to create a static controller to handle the basic pages in our app.
I’m creating a controller named page with one action called home .
rails g controller pages home Next, add a home route to connect the root page to the controller and the action.
# config/routes.
rbroot to: "pages#home"Honestly, the hardest part of all this will be picking the video.
Step 2.
Add the video to your assets pipelineSure, you could just the video to your images folder, but let’s do this properly.
The rails assets pipeline is a pretty powerful tool to take care of minification, time-stamping, cross-browser compatibility, etc.
It also comes with a few Rails shortcuts that help generate the proper HTML with a rails tag.
For example, the Rails image_tag becomes an <img> tag and automatically locates the image inside the app/assets/images folder.
So, how do we make Rails generate an HTML <video> tag?We need some way to access a folder called app/assets/videos and generate a Rails video_tag to then generate an HTML <video> inside the view.
First, add the folder to the application’s asset path#config/application.
rb#make sure to add this below the class Application < Rails::Application lineconfig.
assets.
paths << "#{Rails.
root}/app/assets/videos"IMPORTANT: you must restart the server after this step.
Second, make the video directory inside the terminalmkdir app/assets/videosIn this tutorial, I’ll be adding a video right into the asset pipeline.
There is also something that could be said for pulling a video from a 3rd party service like Cloudinary, or AWS S3, but I’ll save that for another article.
If you’re using Active Storage with Rails 5, you can also get a video directly from it as well.
Step 3.
Find a video for your siteThere’s oodles of awesome sources for royalty-free videos, but my personal favorites are Pexels or Coverr.
For this example app, I’m be using this beach panarama vid, because I just got back from a trip toThailand and I’m already missing the warm weather and the tropical drinks.
I’ve already downloaded the HD version and I am adding it to my app/assets/videos folder under the title beach.
mp4Step 4.
Add the video tag to the home pageThe rails video_tag can take the same attributes as the HTML <video> tag, so you’ll be able to add things like looping, controls, autoplay, etc to make the video more dynamic.
By default, the video I added above won’t autoplay and it’ll actually be impossible to make it place, since there are no controls.
<%= video_tag "beach.
mp4" %>Let’s make the video_tag more user-friendly.
<%= video_tag "beach.
mp4", autoplay: :autoplay, loop: :loop, mute: :mute, class: "home_video" %>Note the css class .
home_video that I added in order to style the video using the stylesheet.
For more options, check out the Mozilla guide to video tags.
Step 5.
Add stylingThe next two steps are optional.
In the first, I’ll add a css class to make the video full-screen and fit it to the size of the page.
In the second, I’ll add banner text and styling to make the example look like an actual web page.
First, add the css:.
home_video { width: 100vw; height: 100vh; position: absolute; display: flex; justify-content: center; object-fit: cover; top: 0; z-index: -2;}What if we wanted to add text over the video?.Right now, the z-index of the video allows me to put text over it, but I can’t center it without adding more absolute divs, and in general position: absolute is something I try to avoid if I can help it.
The easiest solution is to add a wrapper to both the video and text and set it to a flexbox#app/views/pages/home.
html.
erb<div class="home-video-wrapper"> <%= video_tag "beach.
mp4", autoplay: :autoplay, loop: :loop, mute: :mute, class: "home_video" %> <h1 class="home"> Welcome to Paradise</h1></div>#app/assets/stylesheets/application.
scss.
home_video { width: 100vw; height: 100vh; position: absolute; object-fit: cover; top: 0; z-index: -2;}.
home-video-wrapper {height: 100vh;display: flex;}h1.
home { color: white;}And we’re done!You can find the demo app on Heroku or check out my repository below.
I added some Bootstrap4 optimization to the app, but otherwise the code is the same.
maltyeva/video-demoContribute to maltyeva/video-demo development by creating an account on GitHub.
github.
comLet me know what you’d like me to write about next!.For any questions, contact me at hello@mariacodes.
io.. More details