tapswinkler
Veteran
Just Getting Started
Member Likes (0)
Hello,
I am trying to embed youtube videos in my BuddyPress TEST site.
I use latest versions of BuddyPress Social and WP single-user site.
Installed the oEmbed WP plugin.
Problem being: it displays not correct, see here:
http://www.jazzguitarmasterclass.com/forum/activity/
Also, when I click on VIEW, it doesn't display correctly either:
then the YT video displays in correct dimensions, BUT OVERLAPS the sidebar to the right, which looks unprofessional.
I didn't seem to find much info searching here and Google re letting users EMBED YOUTUBE VIDEOS INTO BUDDYPRESS.
Any pointers?
Thanks!
Falk
Responses (12)
Support Guru (joined March 2009) Likes (0)
Hi Falk,
Welcome to WPMU DEV!
The key when you embed YouTube is sometimes you need to adjust the dimensions of the video to fit with the content width of the theme you are using.
With BuddyPress Social it looks like 400 width is the best option.
Below where you grab the embed code from YouTube you just need to add the width 400 and it will adjust the code to the correct dimension.
I've attached a screenshot of what I mean.
Generally 400 to 450 pixels width is the ideal dimension for most themes.
Member (joined November 2010) Likes (0)
Thank you for your reply, Sue!
The thing is... unless I am missing something: my users can NOT use any HTML in the first place anyway... ;(
So, I don't think what you wrote applies here. (Correct me if I am wrong.)
That's why I was excited to learn about the oEmbed WP plugin (where one just pastes the regular YouTube Link..., and the plugin does the rest), which I installed and tested, SEE HERE:
http://www.jazzguitarmasterclass.com/forum/activity/
(scroll down a bit, when you arrive at the page, so you see the YT videos)
But..., as laid out in my post above: they don't display correctly.
(Neither, when I click 'view'. Then they overlap the right side bar.)
Thanks,
Falk
Support Guru (joined March 2009) Likes (0)
Hi Falk, sorry and you are correct. I must have been tired :( We allow our Supporter blogs to embed HTML code and they often have to change it this way.
Looks like others have been asking the same question about oEmbed for BuddyPress. They are working on adding this functionality to the plugin. You can read more here - http://buddypress.org/community/groups/oembed-for-buddypress/forum/topic/oembed-for-bp-0-6-beta-available/
Keeper of the Dark Chocolate (joined July 2007) Likes (0)
I thought oEmbed was part of core? Or is this specifically for buddypress.
I have to admit I would stay away from something like oEmbed if you;re planning on supporting other embed sites. Not for any "i;m against oEmbed" stance but since there are so few oEmbed supported sites out there, having two different competing methods of embeding code will get confusing I would think for the end users.
I know most embedding is done with a shortcode style method like [youtube 123456]. Throw in a second method and folks may by like "Huh? What's the difference?"
Keeping it simple would be a plus. At least that's my opinion.
Member (joined April 2009) Likes (0)
Hiya,
Other solution (which I thought we had discussed before) would be to add a new CSS property to the child's stylesheet. You'd have to define an actual value for all embeds though which may cause unintended results
Just add something like this to the CSS:
.widget embed, .widget param { height: 306px; }Again, that'll make the change more global so all videos will have this height, but it's probably the best way to go for browser compatibility at this point.
Anyone else got a solution here?
Thanks!
Member (joined October 2007) Likes (0)
whats wrong about changing it in the media options? => http://screencast.com/t/gg4AG5vt5mi
Member (joined April 2009) Likes (0)
@Ovidiu, that would work for videos that are too large, but in this case if you take a look at Faulk's link the embed videos are getting cropped too small.
Those settings are for max width and height, what we really need here is a minimum width or height.
Thanks!
Member (joined October 2007) Likes (0)
oops...
just tried it anyway: realized the settings aren't enforced on my install. do they work for you? I just tried, set them up, then posted a huge HD video and it simply overlapped :-(
Member (joined April 2009) Likes (0)
Hiya Ovidiu,
How did you post the video? Using oembed or something different?
Geeky Developer (joined June 2009) Likes (0)
it is overflow issue, the activity area only like 480px width but the video embed are like 640px so it natural to have this overflow issue..using sue method of resize the video in Youtube embed setting or mason css work around or try this...
.activity-inner object, .activity-inner embed {width: 100% !important;
height: auto;
}
cheers
Member (joined November 2010) Likes (0)
Here is the fix, guys!
I just got help from the Oembed developer... ;)
I quote:
Tell WPMUDev to remove the height declaration on line 268 of /wp-content/themes/bp-social/_inc/css/base.css.
Looks like your premium theme is trying to set the width of the embed item via CSS, which isn't great.
I edited line 268 of the following CSS file:
/wp-content/themes/bp-social/_inc/css/base.css
I removed the max-width and height declarations and your homepage now shows the correct height for the embedded item.
=> About my other issue (Youtube Video not displaying correctly, when one clicks on VIEW, R-a-y wrote:
What I did was create a file here:
/wp-content/plugins/bp-custom.php
And added a constant setting for the activity permalink width, which I've set to 425.
Now your activity permalink embeds fit within the constraints of the column.
Member (joined April 2009) Likes (0)
Hiya taps,
Thanks for reporting back! :)
WordPress Questions?
We've got answers!
Find out more »