?
Solved

How to create space above /below YouTube video in WP

Posted on 2010-08-18
12
Medium Priority
?
411 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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 500 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Transferring a wordpress site from a host or local dev server to another host can be a pain. So I've included my steps on how I have accomplished this task. Steps include an assumption that you have Cpanel access or Ftp access.. If you do not hav…
Wordpress Horizontal Drop-Down Menu In this tutorial I will show you had to add a WordPress horizontal navigation menu to your theme. I have searched and searched for a good tutorial on creating a WordPress nav menu without adding a plug-in or us…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Suggested Courses

770 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