Unexpected Embedded Video Margins
-
I am trying to add a border to an embedded videopress video.
(I have the videopress upgrade).I try:
<div style=" border: 3px solid black;"> [wpvideo uk7ADkrZ] </div>but it puts the border roughly 60px below, 5px above, 9px to the left and 11px to the right of the video window.
It is as though there is a margin around the video which I have not put there.
I suspect it is being put there by the code being called by the shortcode
[wpvideo uk7ADkrZ]If I manually add a margin, eg by using:
<div style="margin-top: 48px; margin-bottom: 48px; border: 3px solid black; "> [wpvideo uk7ADkrZ] </div>
it puts this margin outside the border, which is correct,
but still the border is way outside the video window.So how do I put a margin properly around a video window?
The blog I need help with is: (visible only to logged in users)
-
To show the problem more clearly, I have created a test post here:
http://alien-heartbeat.com/2013/11/11/testpost/It is password protected but the password is just:
testpostYou can see that the border is way outside the video window.
-
Originally asked and answered here:
https://en.forums.wordpress.com/topic/how-add-formatting-to-a-video-object-added-using-a-shortcode?replies=5
I don’t see the point of starting a new thread on the same question; anyway, as I said in the other thread, link to the post or page in question please. -
Hi justpi
my apology.
1. The previous thread asked how to add shortcodes to embedded videos. This was well-answered, and I chose the <div> solution you suggested. I then marked it solved so that anyone with the same problem could see it and just go straight to the answer.
2. This thread is I think a separate problem: videos added using shortcodes seem to have a margin added, so when I put a border around it, there is a lot of white space between the video and the border.
3. I have created a test post here that shows the problem:
http://alien-heartbeat.com/2013/11/11/testpost/
protected with the password
testpost
I have not tried to put the border in a real post because it looks so ugly.
When I solve it on the testpost, I will put the solution onto a real post.(ps while it is obviously easier for me to put everything in one thread, I thought it was better for people with one problem but not the other to find the solution if they were in separate threads)
-
Thanks.
No apology needed; it’s just that this question is an extension of the other one, and I think that few users would agree with your kind claim that the other one was “well-answered”! I only gave a general direction: “appropriate style properties and values” isn’t good enough for the non-expert.So:
First, divs are full-width unless you specify a different width.
Second, this video player is 533×348 but the video placeholder inside it is 526×294.
Third, the video player also has a default 5px padding: you can’t override that with a single div (you’d have to enclose the shortcode in a div with negative margins then enclose that div in the div for the border, which is perverse).
For all these reasons, if you insist on using inline CSS, the solution would be a div with suitable dimensions (a bit larger than the video placeholder), a background color instead of a border, and a bottom margin (if you want a paragraph break after the video):
<div style="height:303px;width:535px;background-color:#AA0000;margin-bottom:1.85714rem;">
(I turned the color to red so we can see the result more clearly.)But I will insist that the correct solution is CSS editing. All it takes is a couple of rules – no extra code in the Text editor, no fuss trying to find the suitable dimensions:
.video-player { padding: 0; } .videopress-placeholder { border: 3px solid #AA0000; }This CSS will change all your videos, of course. If you want to change specific ones, that’s also possible.
-
Thanks very much. I added the code you suggested into my custom css and it added a 3px border around the video window.
Once the big center button is pressed and the player appears and the video starts to play, the border disappears. You can see it in the most recent post:
http://alien-heartbeat.com/2013/11/11/dry-cheerless-armed/The border only returns when the page is refreshed.
Is it possible to retain the border even when the player has been activated?
(when the page first displays, the player is not activated – you must click the big center arrow)Bearing in mind I know nothing about this, I did a firefox inspect-element on the video player and noticed:
class=”video-player” style=”width:860px;height:482px”
class=”videopress-placeholder” style=”width: 860px; height: 482px;
As 860 is the theme width, is it possible that the border disappears because you cannot exceed the 860px theme-width?I can’t do an inspect element once the player is activated as it is a flashplayer, and right-click just brings up the flash menu.
But I tried also on a mobile device (android) and the player is less than full width and the border still disappears when played.
-
Sorry, I hadn’t thought of that. Replace this:
.videopress-placeholder {
with this:
.videopress-placeholder, .video-player object { -
Ah, worked like a charm.
(as Arthur C clarke said: “Any sufficiently advanced technology is indistinguishable from magic.”)Thanks very much.
(also thanks for wpbtips – I spent a lot of time there when I was first learning to use wordpress).
Will mark this as resolved.
-
- The topic ‘Unexpected Embedded Video Margins’ is closed to new replies.
WordPress.com Forums 