Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to create space above /below YouTube video in WP

Posted on 2010-08-18
12
Medium Priority
?
419 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 

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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

In Part I (http://www.experts-exchange.com/Web_Development/Blogs/WordPress/A_8410-Getting-Started-In-WordPress-Part-I.html), I introduced you to the powerful WordPress backend, the WordPress administrative Dashboard.  In Part II, I will introduce yo…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
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…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. 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 : Go t…

636 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