Solved

How to create space above /below YouTube video in WP

Posted on 2010-08-18
12
385 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
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

 

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

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

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

Who says nothing in life is free? WordPress.com is a freebie. WordPress.org's downloadable publishing platform is free. Heck, even WordPressMU is free. WordPress is an open source project, which means it can be used on any personal or commerc…
WordPress has made it easy to create scalable sites based on their powerful CMS, but as great as WordPress is, there are some SEO issues that haven’t been addressed out of the box.  Fortunately these problems can be solved with a few plugins.  The f…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

810 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