Carrierwave video uploader - Rails 4

Question

Im using carrierwave with my Rails 4 app.

I'm trying to upload videos to my app and then to display them inside container divs I have created, with controls showing.

I have an uploader file called video_uploader.rb with:

storage: file
 def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

In my projects.rb, I have:

  mount_uploader :link_to_video_proposal, VideoUploader

In my projects show, I have:

<div class="embed-container1">
          <%= video_tag @project.link_to_video_proposal_url :controls =>true %>
</div>

In my projects css file I define embed-container1 as:

.embed-container1 {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 50px;
  width: 200px;
  overflow: hidden;
  //width: 80%;
  //padding-left: 5%;
  //padding-right:5%;
  margin-bottom: 12px;
  margin-top:12px;
}

.embed-container1 iframe,
.embed-container1 object,
.embed-container1 embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;

}

When I inspect the element in google, there appears to be a further css div around the code. The div is called video. I didn't not define it and it is not in my code. It has a single line of CSS specifying:

video {
  object-fit: contain;
}

I don't know if this is what is causing my problem. When I run the page - I get these problems:

1. The controls do not appear on the video. Does anyone now why not? I specify :controls => true in my show page.

2. The box size for embed-container1 is 50px by 200px. However,inspecting the video div in google (a div that I did not create or call) specifies size of 1920*1080.

3. The div size of embed-container1 shows as 200 * 229px in google inspector. I specified 50*200. The video does not fill that box and does not use my CSS.

Does anyone know how to use Carrierwave to upload videos which acknowledge CSS defined in the project? I can't see how to fix this set of errors.

Thank you

Answer 1

You need to set your css to:

.embed-container1 video{}

and start playing with the styles to fit your requirements :)

(tested on Firefox and Chrome)