Embedded videos are massive in the activity stream

[sauntvalerian]

When youtube videos are embedded into a BBPress forum post, they display fine, but when when the activity update gets created for that post, in the activity stream, the videos are massive.

I think the issue is more about the CSS surrounding .fluid-width-video-wrapper and related classes. If a user drops a YouTube link into an activity update, oembed handles it properly but it gets the same massive treatment and the BBPress embedded videos. I noticed it first with BBPress, but them had another test with a plain link dropped into an update.

I tried pinning it down, but everything I did in CSS screwed up the dimensions of the video or failed to resize the activity update itself accordingly. I just can’t seem to get it down to a reasonable size. Somehow, a reasonable max-width would be helpful (400px, maybe?). I know you are going for the fluid width thing so it works well across devices, but on a desktop, it turns out really big and strange.

I’ve attached a screenshot to show you what we are seeing.

[Anonymous]

@sauntvalerian

This is unrelated, but what plugin are you using for the Live Chat at the bottom right of your screenshot?? Does it work pretty well?

[Alyssa]

@sauntvalerian Have you tried this:
.fluid-width-video-wrapper{max-width:400px !important;}

[sauntvalerian]

@tjchester yes I did try that, and some other similar things, but it only effected the width. The height is still massive and height auto creates weird dimensions for the video.

One of the issue present is

.fluid-width-video-wrapper iframe, 
.fluid-width-video-wrapper object, 
.fluid-width-video-wrapper embed {
width: 100%;
height: 100%;
}

Over-riding that height with auto doesn’t resize the the activity update resulting in huge whitespace below the video. I attached two screenshots here to illustrate what I am talking about. One shows just the width modification you mentioned, the other shows the width modification with the height change that I post here. I just an’t seem to be able to figure this out.

@ionprojekt that live chat is the Skysa bar from http://www.skysa.com/

[sauntvalerian]

@tjchester – I still need help with this. I also need to add that oEmbedded videos embeded using Activity plus have the same full width problem. The CSS seems to be over-riding all of the oEmbed width rules.

Have you been able to replicate this on your testing sites, even with just BBPress embedded videos?

[sauntvalerian]

@tjchester I found this in the forum for BuddyBoss where you posting a fix for this issue https://www.buddyboss.com/support-forums/topic/embeded-videos-stretching/

Seems that it is controlled by fitvids to make them responsive.

Are you guys using the same technique in the Boss theme? And which file would I need to copy to my child theme and edit in order to employ this fix? I went through the Boss file directory, but nothing is really standing out to me. Also, if you locate the file what is the code that needs to be modified?

[sauntvalerian]

@tjchester – you can disregard this and mark it as solved. I found the fitvids call in boss/js/buddyboss.js

I copied the file to boss-child-theme/js/buddyboss.js and commented out lines 441 to 452.

I’m wondering though, since this issue has come up a couple times might you consider creating a more straightforward option for site owners to disable fitvids in the activity stream? Of course, I like the idea of responsive videos, but is there a way to modify fitvids output to set a max-width instead of 100%? A max-width of 450px is probably a safe size for the majority of installations, that way fitvids can still be responsive for smaller screens, but not get massive on larger screens.

[Alyssa]

@sauntvalerian glad you were able to resolve this. Sorry to say I did respond previously but I think there was a server hickup. It was a dirty jQuery hack to enclose the divs again to have fitvids not exceed max-width. We should be able to add this to be disabled.

[Anonymous]

@sauntvalerian @tjchester

We’re working on a fix. Videos will get posted with a max-width of 530px, just like photos when using Media plugin. Media uses 530px so the two will look nice together like this. It looks more normal/natural at those dimensions. And with our fix height will adjust correctly too.

[Anonymous]

This is fixed for next release. Sorry for the delay.

[Anonymous]

Hi @sauntvalerian @tjchester , as a temp fix you can add this in functions.php with your desired width and height

add_filter( 'embed_defaults', 'modify_embed_defaults' );
function modify_embed_defaults() {
    return array(
        'width'  => 530, 
        'height' => 375
    );
}

Regards
Varun Dubey

[sauntvalerian]

@vapvarun can you double-check the syntax on that? It doesn’t change anything for me. Either way, I’m happy waiting for the next release anyhow, though I do appreciate you offering up this interim fix.

[Anonymous]

hi @sauntvalerian Developers had already worked on proper solution, i will be available soon in next version , above code is working perfect for the activity embedded url and you can play with different different width

Regards
Varun Dubey

[Jim]

Hi guys,

sorry for stepping in this topic. But I got the same problem and also tried the things above. If I use CSS to restrict the max-width, I still see a long display of the video. And based on my plays with the padding-bottom part, I think that could be the issue.

[Alyssa]

@jiimi Welcome to the BuddyBoss community! I corrected the above code. Were you able to get it to enter correctly? Or did it simply not work for you?