Back to Community

How to Customize or Remove the Play Button on Your Instagram Feed

Content

Many users of the Smash Balloon Social Photo Feed plugin want to customize the appearance of their Instagram feed, particularly the play button icon that appears over video posts and reels. A common request is to remove this icon entirely or change its size for a cleaner look. This guide will walk you through the most effective methods to achieve this using simple CSS code.

Why Customize the Play Button?

The default play button is a visual indicator that a post is a video. However, it might not always fit the design aesthetic of your website. You might find it too large, or you may prefer a minimal feed without any icons. Based on the sample support threads, this is a frequent customization users seek.

How to Remove the Play Button with CSS

The most reliable method to remove the play button is by adding a small snippet of Custom CSS to your WordPress site. This approach is safe and will not be overwritten when you update the plugin.

  1. Navigate to your WordPress Dashboard.
  2. Go to Instagram Feed > Customize.
  3. Click on the Misc tab.
  4. Locate the Custom CSS text box.
  5. Paste one of the following code snippets into the box:

To remove the play button from all video posts:

#sb_instagram .sbi_playbtn {
    display: none !important;
}

For a more specific selector that targets only video posts (recommended):

#sb_instagram .sbi_type_video .sbi_playbtn {
    display: none !important;
}
  1. Click Save Changes.

After saving, clear your website's cache if you use a caching plugin. The play button should now be hidden from your feed.

How to Resize the Play Button

If you prefer to keep the icon but make it smaller, you can adjust its size with CSS instead of hiding it completely.

  1. Follow steps 1-4 above to reach the Custom CSS box.
  2. Paste the following code:
.sbi_photo_wrap svg.fa-play {
    width: 20px !important;
}
  1. Click Save Changes.

You can adjust the 20px value to any size that fits your design.

Important Considerations

  • Mobile Functionality: In some cases, custom CSS can interfere with the button's functionality on mobile devices. If users report that the play button is not working on mobile, a different CSS fix may be required to resolve a z-index conflict.
  • Font Awesome: The play icon is part of the Font Awesome library. While removing the entire Font Awesome library would also remove the icon, this is not recommended as it is also used for other elements, like the Instagram logo in the feed header.
  • Plugin Updates: Using the plugin's built-in Custom CSS area ensures your changes will persist after updates. Adding code directly to your theme's files is not recommended, as those changes can be lost when the theme is updated.

By following these steps, you can easily tailor the look of your Instagram feed to better match your website's design.

Related Support Threads Support