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%;
}
Related
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'm attempting to create a class for embedded youtube videos that will display them at 100% width in the div, and will adjust the height according to the video's aspect ratio.
I have found the following suggestion here:
.fluidMedia {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.fluidMedia iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="fluidMedia">
<iframe src="" frameborder="0"> </iframe>
</div>
but this relies on every video having the same aspect ratio to work. I'd prefer to write one class that just works, regardless of the video embedded into it. Can this be done without javascript?
The only CSS solution is the one you used, where you need to set the ratio in your CSS file – therefore there is no generic frontend solution without JavaScript.
You could have Drupal extract the ratio for you, of course – and write it into an inline CSS style property like
<div class="fluidMedia" style="padding-bottom: <?=$imgWidth/$imgHeight?>">
How to get the Video ratio would be a Drupal or PHP question.
For the JavaScript Solutionsee AndyM's link: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
I'm just working on a site and I need an image in the top right corner that will link to another site when clicked. I created this in the CSS file:
div.image:before {
content:url(http://LinkToMyImage);
max-height: 169px;
max-width: 220px;
position: absolute;
top: 0px;
right: 0px;
}
Then add this html:
<div class="image"></div>
It appears exactly how I want it but it's obviously not a link, is there a way I can make this linkable? I have tried href to the div but that does not work. Any help is greatly appreciated! Thanks!
You can accomplish the exact same thing by simply using an anchor tag. Also, there's no need to be so specific with your css by referencing the element your class applies to. That will take quite a bit longer to process than just using the class name.
If you need a higher level of specificity, target your element with another class name. Avoiding a specific element makes your code more flexible should the markup need to change in the future.
Change your html to:
<a class="image"></a>
and your css to:
.image:before {
content:url('http://LinkToMyImage');
// You should also be able to safely eliminate `display: block;`
// when setting `position: absolute`, but included it just in case you
// experienced problems setting width and height
display: block;
height: 169px;
width: 220px;
position: absolute;
// top 0 is usually inferred when setting position: absolute;
// you should be able to remove this
top: 0px;
right: 0px;
}
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/