[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

How to create space above /below YouTube video in WP

Hello,

I would like to add a padding above and below YouTube videos in posts and pages.
Now the line break/paragraph trick doesn't work, since the Video is the 1st line of the post/page.
I have tried to do it via CSS, but did not succeed.

Anybody got a solution(hopefully CSS)?

Thanks
0
Sumukha
Asked:
Sumukha
  • 6
  • 6
1 Solution
 
DzynitCommented:
You can use css normally but will still have to add a class to the first object tag of the youtube embed code:

<object class="padyoutube" classid=".....

Then in your stylesheet you can set up your padding:

object.padyoutube {
padding: 15px 0;
}


0
 
SumukhaAuthor Commented:
Hi Dzynit,
thanks for posting.
I just looked at your profile which says Guru for WordPress...
Do you know any other trick how to accomplish that?

That particular site will be maintained by people who will roll their eyes when I ask them to alter the code....

Thanks
0
 
DzynitCommented:
Can you give me a link to a page with one on it?
0
Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

 
SumukhaAuthor Commented:
Unfortunately not.  But the question applies for any YouTube video implemented in a WordPress site
0
 
DzynitCommented:
ok, this worked, but you'll have to adjust the numbers to suit your site. I also set .post before object so it won't also affect objects in other areas. So you'll have to change that to whatever class or id name you use in your theme for the actual post content area.


.post object {
margin: 25px 0;
line-height: 800px;
}

Open in new window

0
 
SumukhaAuthor Commented:
I have tried that one (with/without .post) before, doesn't have any effect on my sites.
Strange: Using Firebug, I see the line height applied, but no margin or padding.
0
 
DzynitCommented:
What's the size of the video player? Did you try an exaggerated number in the line-height?
0
 
SumukhaAuthor Commented:
Videos are 540*328 resized according to post width.

Line height either 300 or 400px has only an effect on the space below the video. I also wanted to have more space above it, but the margin does not have any effect either. Tried padding-top, it showed in Firebug, but the video remained in the same spot.
I checked if there was any other class referring to objects, and disabled them.


0
 
DzynitCommented:
I'm not sure what else to try. I know I had to make the line-height 800px to get that 25px margin above on a video that was 400px high.

Maybe you could use the request attention and ask for this to be put in html and css categories. You might find someone with a better trick. The youtube object seems to be the main issue. When I tested using just object in the stylesheet, all other embedded objects definitely accepted the margins.
0
 
SumukhaAuthor Commented:
I was already wondering about the 800. That kind of works, but creates also a huge space below the video.

Have you played with Firebug in Firefox?
The interesting thing is that when you select the beginning of the <object > tag, it shows the whole class and it highlights the video controls, but when you select the embed tag, you'll see the line height of that class only - not margin or padding - and it highlights the video.
0
 
DzynitCommented:
Yeah, that's what I use.

So if that works, just play with the number 800 till it hits the right height. I would guess that the reason the number has to be double like that is because it's an object rather than text. So it might be confusing the css.
0
 
SumukhaAuthor Commented:
Thanks, this is not the ultimate, but the best I could find.
Appreciate your help!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now