TheirStory Shared Story iFrame Embed Examples

Interactive guide to embedding TheirStory content on your website

🚀 Interactive Embed Editor

Edit the iframe code below and click "Update Preview" to see your changes in real-time:

✓ Updated
Live Preview
💡
Try these modifications:
  • Change width to "600" or "50%"
  • Add style="max-width: 800px;"
  • Add URL parameters like ?link-back=false
  • Modify the height attribute

Basic Embed

The default embed code with 100% width and 720px height:

<iframe width="100%" height="720" src="https://share.theirstory.io/story/67ef462bbf06a6862537b196" title="Karen Sandler interview with FOSSDA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Live Example

Fixed Width Examples

Small Width (400px)

400px Width

Medium Width (600px)

600px Width

Responsive Width with max-width and min-width

Responsive with max-width

Limits the maximum width while allowing the iframe to scale down on smaller screens:

100% Width with max-width: 800px

Responsive with min-width and max-width

Ensures the iframe stays within a specific size range:

Responsive: min-width: 300px, max-width: 600px

Using !important to Override Styles

When you need to override existing styles, you can use !important:

💡
Note: Using !important ensures your styles take precedence over any other CSS rules that might affect the iframe dimensions.
With !important Override

URL Parameters

Customize the embedded story behavior using these URL parameters:

search

Highlight specific search terms

?search=searchterm

link-back

Show/hide link back to TheirStory

?link-back=false (default: true)

autoscroll

Enable automatic scrolling

?autoscroll=true (default: false)

poster

Custom poster image URL

?poster=url-of-image

highlight-words

Enable/disable word highlighting

?highlight-words=false (default: true)

story-title

Enable/disable story title

?story-title=false (default: true)

Example with Parameters

Embed with custom poster image and no link-back:

With Custom Poster & No Link-back

Multiple Parameters Example

Combining multiple parameters:

Autoscroll + No Highlights + Search Term

Best Practices

✅
Recommendations:
  • Use responsive widths (%) with max-width for better mobile compatibility
  • Consider your site's layout when choosing heights
  • Test parameter combinations before deployment
  • Always include the allowfullscreen attribute for video content
  • Use meaningful titles for accessibility