I am trying to implement a responsive, full-background video for the homepage of my RoR app.
Currently, the video is just showing up as a big black blank screen in development. I decided to put the video in only one format (mp4) and throw it vid.me rather than go through S3 or AWS.
Is there anything wrong with my code or am I missing something else?
Thanks!
app/assets/stylesheets/custom.css.scss
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
@gray-light: #777;
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.5em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #F0F8FF;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
}
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: url(https://vid.me/e/4UIS);
background-size: cover;
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
}
app
The code for the video file is currenlty in the application folder and not the static_pages/home.html.erb file because it shrinks when not in applicaiton.thml.erb for some reason:
app/views/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<video>
<source src ="https://vid.me/e/4UIS" type="video/mp4"/>
</video>
<%= render 'layouts/shim' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
If you're using .scss, you'll be far better going the extra step and using sass:
#app/assets/stylesheets/custom.css.sass
/* Dependencies */
@import "bootstrap-sprockets"
@import "bootstrap"
/* Vars */
$gray-light: #777
$gray-medium-light: #eaeaea
/* Universal */
body
padding:
top: 60px
section
overflow: auto
textarea
resize: vertical
center
text:
align: center
h1
margin:
bottom: 10px
/* Type */
h1, h2, h3, h4, h5, h6
line:
height: 1;
h1
font:
size: 3em
letter:
spacing: -2px
margin:
bottom: 30px
text:
align: center
h2
font:
size: 1.5em
weight: normal
letter:
spacing: -1px
margin:
bottom: 30px
text:
align: center
color: $gray-light
p
font:
size: 1.1em
line:
height: 1.7em
/* Header */
#logo
float: left;
margin:
right: 10px
font:
size: 1.7em
weight: bold
color: #F0F8FF
text:
transform: uppercase
letter:
spacing: -1px
padding:
top: 9px;
&:hover
color: white
text:
decoration: none
video
min:
width: 100%
height: 100%
width: auto
height: auto
background:
image: url(https://vid.me/e/4UIS)
size: cover
/* Footer */
footer
margin:
top: 45px
padding:
top: 5px
border:
top: 1px solid $gray-medium-light
color: $gray-light;
a
color: $gray
&:hover
color: $gray-darker
small
float: left
ul
float: right;
list:
style: none
li
float: left
margin:
left: 15px
In regards your actual problem, I had to read up on this to see how it works. It seems that there's more to it than calling a CSS background of the video. HTML needs to know if it's a video or not...
Here are some resources:
It seems the bottom line is you have to invoke the video element into HTML, using CSS to style the full-screen nature of it:
#source - http://codepen.io/mattgrosswork/pen/jrdwK
<video autoplay loop id="video-background" muted>
<source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
#video-background {
/* making the video fullscreen */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
--
So for you, maybe something like this:
#app/views/layouts/application.html.erb
<%= video_tag "https://vid.me/e/4UIS", id:"video-background"%>
#app/assets/stylesheets/application.js.erb
#video-background {
/* making the video fullscreen */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments