Solved

How to create space above /below YouTube video in WP

Posted on 2010-08-18
12
393 Views
Last Modified: 2012-05-10
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
Comment
Question by:Sumukha
  • 6
  • 6
12 Comments
 
LVL 14

Expert Comment

by:Dzynit
ID: 33475498
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
 

Author Comment

by:Sumukha
ID: 33476439
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
 
LVL 14

Expert Comment

by:Dzynit
ID: 33476986
Can you give me a link to a page with one on it?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Sumukha
ID: 33477152
Unfortunately not.  But the question applies for any YouTube video implemented in a WordPress site
0
 
LVL 14

Accepted Solution

by:
Dzynit earned 125 total points
ID: 33477211
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
 

Author Comment

by:Sumukha
ID: 33477521
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
 
LVL 14

Expert Comment

by:Dzynit
ID: 33477598
What's the size of the video player? Did you try an exaggerated number in the line-height?
0
 

Author Comment

by:Sumukha
ID: 33478087
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
 
LVL 14

Expert Comment

by:Dzynit
ID: 33478191
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
 

Author Comment

by:Sumukha
ID: 33478430
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
 
LVL 14

Expert Comment

by:Dzynit
ID: 33478550
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
 

Author Closing Comment

by:Sumukha
ID: 33495909
Thanks, this is not the ultimate, but the best I could find.
Appreciate your help!
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Now that you've installed WordPress 2.9 (http://www.experts-exchange.com/articles/Web_Development/Blogs/WordPress/WordPress-2-9-What-to-Expect-When-Upgrading-to-WordPress-2-9.html?) on your site, you need to install some plugins to get the most out …
WordPress is constantly evolving, and with each evolution appears to get better and better.  One of the big drawbacks prior to version 3 was that there was no way to be able to set up a custom menu from the backend. The Old Way Adding menus is…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question