• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Change Content Width For Media Embeds Conditionally

Need to change the width on your YouTube Video, native WordPress gallery or tiled gallery using a Mosaic effect?

You can change the content width globally using PHP code but what if you only want to change it on one post or page?

You can also change the width and height for a Youtube embed manually using shortcodes.

What if you only want to change it on all embeds using a specific template or on all galleries assigned to a specific category?

Here’s several tested and working code snippets you can easily modify to your own needs.

Place the code at the end of your child themes functions.php file and change the conditional tag if needed.

The above code will change the width for all embeds including videos and galleries for one specific page.

The above code will change the width for all embeds including videos and galleries for one specific post.

The above code will change the width for all embeds including videos and galleries on multiple posts.

The above code will change the content width for all embeds on multiple posts and pages.

The above code will change the content width for embeds on pages using a specific template.

Difference

Here’s the difference between using the default content width and a custom content width for your tiled gallery. You can clearly see the custom width enables you to display your media full width as opposed to leaving a gap on the side.

Image Gallery Using Full Content Width

full width content width for gallery

Image Gallery Using Partial Content Width

gallery not displaying full content width

I hope that’s helps point you in the right direction for changing the content width for media embeds.

Related Posts

  • Change Tiled Gallery Content Width For Jetpacks Tiled Galleries
  • Show Different Size Youtube Videos on Different Pages

Reader Interactions

Comments

  1. Cindy Bryant says

    July 26, 2014 at 3:37 am

    How could I oembed Facebook posts properly and make it responsive so it doesn’t stick outside the content box? I attempted the codes above, but it didn’t seem to apply in this case, or more than likely I didn’t do it right. Same if I was to drop Facebook or other oembed code into a widget for responsiveness. Thanks.

    Log in to Reply
    • Brad Dalton says

      July 26, 2014 at 3:44 am

      The code on this specific page effects all Media embeds and has been tested for use with images and videos.

      What may help is using a specific filter like what Jetpack uses http://wpsites.net/web-design/change-tiled-gallery-content-width-for-jetpacks-tiled-galleries/

      I would use a Facebook widget rather than hand code it unless it needs to be hard coded into a theme.

      You’ll need to write CSS Media Queries for any customization.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.