Embedding Stories

<div class="wp-block-web-stories-embed web-stories-embed aligncenter">
  <div class="wp-block-embed__wrapper" style="--aspect-ratio: 0.6; --width: 360px; --height: 600px">
    <amp-story-player>
      <a href="https://example.com/web-stories/my-story/">
        <img
          src="https://example.com/poster.jpg"
          width="360"
          height="600"
          alt="Story Title"
          loading="lazy"
          decoding="async"
          data-amp-story-player-poster-img
        />
      </a>
    </amp-story-player>
  </div>
</div>

[web_stories_embed url="https://example.com/web-stories/my-story/"]

<?php
use Google\Web_Stories\Model\Story;
use Google\Web_Stories\Renderer\Story\Embed;

// Get story by ID or URL
$story = new Story();
$story->load_from_post(get_post(123));

// Configure embed attributes
$attributes = [
    'width'  => 360,
    'height' => 600,
    'align'  => 'center',
];

// Render the embed
$embed = new Embed($story, $assets, $context);
echo $embed->render($attributes);
?>

<?php
// In your theme template file (e.g., single.php, page.php)
if (function_exists('web_stories_embed_shortcode')) {
    echo do_shortcode('[web_stories_embed url="' . esc_url($story_url) . '"]');
}
?>

<?php
$args = [
    'post_type'      => 'web-story',
    'posts_per_page' => 3,
    'orderby'        => 'date',
    'order'          => 'DESC',
];

$stories = new WP_Query($args);

if ($stories->have_posts()) {
    while ($stories->have_posts()) {
        $stories->the_post();
        echo do_shortcode(
            sprintf(
                '[web_stories_embed url="%s" title="%s"]',
                esc_url(get_permalink()),
                esc_attr(get_the_title())
            )
        );
    }
    wp_reset_postdata();
}
?>

$attributes = [
    'previewOnly' => true,
    'width'       => 360,
    'height'      => 600,
];

[web_stories_embed 
  url="https://stories.google.com/stories/example-story" 
  title="Example Story"
]

.web-stories-embed {
  --aspect-ratio: 0.6; /* width / height */
  --width: 360px;
  --height: 600px;
}

.wp-block-embed__wrapper {
  max-width: var(--width);
  aspect-ratio: var(--aspect-ratio);
}

add_filter('web_stories_embed_default_attributes', function($attrs) {
    $attrs['width']  = 400;  // Wider default
    $attrs['height'] = 640;  // Taller default
    $attrs['align']  = 'center';  // Center by default
    
    return $attrs;
});

/* Customize embed container */
.web-stories-embed {
    margin: 2rem auto;
    max-width: 100%;
}

/* Add shadow effect */
.web-stories-embed amp-story-player {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

/* Adjust spacing */
.wp-block-web-stories-embed {
    padding: 1rem 0;
}