WordPress嵌入data-instgrm-version="8"的Ins帖子，自定义CSS失效

Hey there, I totally feel your pain—after Instagram rolled out their data-instgrm-version="8" embed code, the custom CSS we relied on (shoutout to Ryan Parrish's original solution!) for horizontal, fixed-width embeds (max 320px) stopped working cold. The DOM structure of Instagram's embeds got a full overhaul, so our old selectors just weren't hitting the right elements anymore.

I dug into the updated embed markup and came up with a working solution that restores the horizontal layout while enforcing that 320px max-width. Here's how to do it:

Step 1: Wrap Your Embed in a Custom Container #

First, wrap Instagram's official embed code in a container with a custom class (I'm using ig-horizontal-embed here for clarity):

<div class="ig-horizontal-embed">
  <!-- Your Instagram embed code with data-instgrm-version="8" -->
  <blockquote class="instagram-media" data-instgrm-permalink="https://your-instagram-post-url.com" data-instgrm-version="8" style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
    <!-- Embed content here -->
  </blockquote>
</div>

Step 2: Apply the Updated CSS #

This CSS targets the new nested classes in version 8 embeds, forces the horizontal layout, and locks in the 320px max-width:

/* Main container to enforce max-width */
.ig-horizontal-embed {
  max-width: 320px;
  margin: 0 auto; /* Optional: center the embed on the page */
  overflow: hidden;
}

/* Override Instagram's default embed width */
.ig-horizontal-embed .instagram-media {
  width: 100% !important;
  max-width: 320px !important;
  display: flex;
  flex-direction: row !important;
}

/* Target the inner content wrapper for horizontal alignment */
.ig-horizontal-embed .instagram-media .x1lliihq.x1n2onr6 {
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

/* Ensure media (image/video) fits correctly */
.ig-horizontal-embed .instagram-media .x1ey2m1c.xds687c.x5yr21d.x10l6tqk.x17qophe.x13vifvy.xh8yej3 {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  object-fit: cover;
}

/* Style the caption section to sit alongside media */
.ig-horizontal-embed .instagram-media .x193iq5w.xeuugli.x13faqbe.x1vvkbs.x10flsy6.x1lliihq.x1s928wv.xhkezso.x1gmr53x.x1cpjm7i.x1fgarty.x1943h6x.x1tu3fi.x3x7a5m.x1lkfr7t.x1lbecb7.x1s688f.xzsf02u {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: 14px;
}

Quick note: Instagram has a habit of changing their dynamic class names occasionally. If this stops working down the line, just right-click the embed and inspect the DOM to update the class selectors to match the latest ones.

Step 3: Don't Forget the Embed Script #

Make sure you still include Instagram's official embed script at the end of your page (it's required for all embeds to load properly):

<script async src="//www.instagram.com/embed.js"></script>

Why This Works #

Instagram completely restructured their embed's DOM in version 8, adding extra nested divs with new, dynamic class names. Our updated CSS targets these new containers, uses flexbox to force the media and caption into a horizontal layout, and applies the 320px max-width constraint to our custom wrapper (and overrides Instagram's default width styles).

内容的提问来源于stack exchange，提问作者E.Hoh