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 ;)
Related
I found this overlay scrollbar (https://github.com/KingSora/OverlayScrollbars) which is absolutely perfect except for one detail... it screws up the sticky footer.
The sticky footer I'm using is straight from the template in Visual Studio when creating a new .net core mvc project. For convenience though I'll copy the relevant styles here:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 45px;
}
After including the appropriate css and js files in the appropriate places, I initialize like so:
<script>$("body").overlayScrollbars({});</script>
But this causes the footer to always show up even when the page is not scrolled to the bottom as shown in the attached picture. I've been tinkering with styles but I really have no clue how to fix this or why it's even occurring to begin with.
I'm using a Wordpress block to embed a video, and I want to set a maximum height (in pixels) for the video. There doesn't seem to be a UI way of doing this. Using the "edit as HTML" button, I see the following code:
<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress">
<div class="wp-block-embed__wrapper">
https://videopress.com/v/STUFF?preloadContent=metadata
</div>
</figure>
What's the best way to add a max-height:320px to this code?
Are you trying to edit this block using Gutenberg?
Looking to this code I can think there is a CSS hierarchy problem, any online example to test CSS property on this?
Probably you need to handcraft a custom CSS to this problem, and set the height as the way you want.
There's a piece of CSS maybe can help you, I found it on a Gutenberg issue about this problem:
figure.wp-block-embed.is-type-video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /*16:9*/
}
figure.wp-block-embed.is-type-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
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)
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.
I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.
Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).
Here's the link: http://chrisphoto.com/masters2/index.html#chapter-2
Here you can get some awesome tricks on responsive videos in CSS, youtube iframe too.
For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "video_wrapper"
.video_wrapper{
margin: 82px auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; width: 80%;
}
.vdo_span iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%; /* Adjust height to your own need */
}