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:
The controls do not appear on the video. Does anyone now why not? I specify :controls => true in my show page.
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.
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
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)
Related
I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.
The image is given inside a card.
.Card{
border:none;
font-family: 'NCS Radhiumz';
border-radius: 15px;
background-color: #000000;
width:90%;
height: 85%;
margin-left: 80px;
padding-left: 5%;
padding-right: 5%;
I just want everything on the page to resize without disappearing from the page. I'm very new to coding.
Anybody know how to fix it?
What you're most likely missing is some styling on your image element. Try this in your css file:
img {
width: 100%;
object-fit: contain;
}
You can experiment with different ways to fit the image in your component. Check out these docs for some options.
you're asking for responsive web design. You can achieve that by implementing CSS Media Query.
Learning source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If you want your image to be in one place and don't move you can do that with position style in css like so:
.element {
position: fixed;
}
or
.element {
position: absolute;
}
But image moving below is normal since the browser can't fit the image besides the text.
If you want your image to behave differently you can do that by using #media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.
Tried different method to customise(hide YouTube title,logo etc). But still not working. My goal was to hide the title top bar primarily. So looking for some guidance if this is possible at the current time?
*Tried css method,iframe viewport method and some other
Well, there is a solution since youtube deprecated the parameter showinfo, you can use html and css.
First, you have to put the youtube iframe in a div:
<div class="frame-container">
<iframe></iframe>
</div>
Next, you must increase the size of the frame so that it is outside the browser window, and then align it in the centre, since youtube only tries to centre the video and keeps its logos on the sides, this trick should work.
.frame-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
width: 300%; /* enlarge beyond browser width */
left: -100%; /* center */
}
.frame-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and finally, to prevent everything from stretching because of the size, you put it inside a wrapper.
<div class="wrapper">
<div class="frame-container">
<iframe></iframe>
</div>
</div>
.wrapper {
overflow: hidden;
max-width: 100%;
}
EDIT 1: In case you want to disable suggested video and just allow pause, you have to replace the url with:
In that case, you have to replace the youtube url with:
https://www.youtube.com/embed/VIDEOID?playlist=VIDEOID&loop=1
When the video is looped, the suggested videos will be disabled, and even with the controls disabled you can pause the video by clicking on the video.
I'm trying to use the "stars" example as a simple background in a html page, with html content on the page as well (I'm far from being into js. - simple html- and css-handling is ok).
What do I have to put into:
- css (separate or inline)
- html head
- html body
I'm just looking into the .js use as a background. I managed to strike the mouse parameter as vector defining out of the stars code. This runs ok now just as is, but I either turn up in showing just the .js or the html content with missing the stars background. Thanks alot in advance!
This is what I have setup in my CSS
body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
margin: 0px;
padding: 0px;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
Hope this helps
I was playing around with wagtail and had a strange padding-bottom issue when inserting a video using the default wagtail editor (hallojs). Turns out the video is wrapped in a .responsive-object div with inline style padding-bottom: 62.5%;. Since my video wasn't responsive at all, I gess there was something I did't do correctly.
I had a huge padding under the embedded video. I couldn't find a place explaining how to integrate wagtail's editor generated html. There's a page in the documentation about video embedding, but nothing useful.
Solution
It was easy, searched for .responsive-object and found embed.ly responsive tutorial. To make everything look good again, I needed this css:
.responsive-object {
position: relative;
padding-bottom: 67.5%;
height: 0;
margin: 10px 0;
overflow: hidden;
}
.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Result
If someone finds something on how to integrate content properly from the hallojs editor, leave a comment or an answer ;)
I am trying to embed this video on this virb page: http://www.amytdatta.com (password: tyma)
It's an album pre-release, hence the site password, sorry!
Try as I might, i'm unable to emulate the full window scaling behaviour of the vimeo video page. I've tried putting min-width: 100%, min-height: 100%, max-height: 100% everywhere but my embedded video is taller than the browser window and doesn't scale in the neat way the vimeo page does.
any advice?
The problem lies within your CSS properties.
If you take a look at the following codesegment (base.css, line 208):
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
You will see that you have a padding at the bottom aswell as a defined position. Just delete those two lines, so it looks like this:
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-top: 30px;
}
It'll look like you want it to.