Can a Buzzfeed video width be resized to fit within a PB

Hi Wireb,

Are all of the videos you wish to embed on Twitter? If so, you should be able to use the WordPress oEmbed functionality to do this. To do this, simply copy and paste the Twitter URL rather than using the embed code. Which will look like this.

Once you’ve done that, you can have it resize via CSS but depending on the layout but please note that in very large rows, it can be absolutely massive. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

.so-widget-sow-editor .twitter-tweet, .so-widget-sow-editor .EmbeddedTweet, .so-widget-sow-editor .MediaCard-widthConstraint {
	max-width: none !important;
	width: 100% !important;
}

You might also need to install the SiteOrigin CSS Editor.

Hi Wireb,

Are you blocking Twitter via a browser extension (such as Ad Block, or Privacy Badger)? When I disable mine, it appears correctly:

Hi Wireb,

I was expecting you to use a different widget. Please navigate to WP AdminAppearanceCustom CSS and remove the previously provided CSS, then add:

.widget_black_studio_tinymce .twitter-video, .widget_black_studio_tinymce .twitter-tweet, .widget_black_studio_tinymce .EmbeddedTweet, .widget_black_studio_tinymce .MediaCard-widthConstraint {
	max-width: none !important;
	min-width: 1px !important;
	width: 100% !important;
}

You might also need to install the SiteOrigin CSS Editor.

Hi Wireb,

Hm, by the looks of it, it looks like you’re referring to the widget padding you’ve set. Please open the Visual Editor that you used to add the Twitter embed and head over to the widget styles sidebar. Open the layout settings group and set the padding to 0 (or at least lower it).

Hi Wireb,

No problem.

The CSS styles field in the Attributes settings group is only for inline styles. It’s intended purely for container adjustments, such as moving the background image up or something similar. To clarify, inline styles implies that it’s equivalent to:

<div style="CSS STYLES HERE"></div>

In other words, you cannot use selectors. For example, this is valid:

color: #f0f;
font-weight: 600;

This is not:

.example {
    color: #f0f;
}

.other-example {
    font-weight: 600;
}

—

SiteOrigin CSS requires selectors as it’s not applied inline.