YouTube、Twitter、汎用iframeの埋め込みとスケルトンローディングエフェクトのテストページです。
このページでは、様々な外部コンテンツの埋め込みとスケルトンローディングエフェクトをテストします。
1. YouTube埋め込み
基本的なYouTube動画
別のYouTube動画
2. Twitter埋め込み
基本的なツイート
別のツイート例
3. 汎用Embed（iframe）
デフォルト設定（16:9）- YouTube
CodePen埋め込み
Google Maps埋め込み
Spotify埋め込み
カスタムアスペクト比（4:3）
正方形（1:1）
4. 複数の埋め込みを連続で
YouTube 1
YouTube 2
YouTube 3
5. 混在する埋め込み
YouTubeとTwitterを混ぜてテストします。
注意事項
- すべての埋め込みコンテンツは外部サービスから読み込まれます
- 読み込み中はスケルトンローディングエフェクトが表示されます
- スケルトンはキラキラとアニメーションします
- コンテンツの読み込みが完了すると、スムーズにフェードインします
期待される動作
- スケルトンが即座に表示される（16:9のアスペクト比）
- スケルトンがキラキラとシマーアニメーションを表示する
- コンテンツ読み込み完了後にスムーズにフェードインする
- Twitter埋め込みのみborder-radiusが適用される
- YouTube/汎用Embedはborder-radiusなし
- レスポンシブデザインで異なる画面サイズに対応する
テスト項目
YouTubeEmbed
✓ 基本的な動画埋め込み
✓ 複数の動画を連続で埋め込み
✓ スケルトンエフェクト表示
✓ フェードインアニメーション
✓ レスポンシブ対応
TwitterEmbed
✓ ツイート埋め込み
✓ border-radius適用（12px）
✓ スケルトンエフェクト表示
✓ ライト/ダークテーマ対応
汎用Embed
✓ カスタムアスペクト比設定
✓ 様々なコンテンツの埋め込み対応（YouTube、CodePen、Google Maps、Spotify）
✓ スケルトンエフェクト表示
✓ フェードインアニメーション
技術詳細
YouTubeEmbed
TypeScript
<YouTubeEmbed
videoId="動画ID"
title="タイトル（任意）"
autoplay={false}
/>TwitterEmbed
TypeScript
<TwitterEmbed
tweetId="ツイートID"
theme="light" // または "dark"
/>汎用Embed
TypeScript
<Embed
src="埋め込みURL"
title="タイトル（任意）"
aspectRatio="16/9" // または "4/3", "1/1" など
allow="許可する機能"
allowFullScreen={true}
/>サポートされる埋め込みサービス
汎用Embedコンポーネントは以下のサービスの埋め込みに対応しています：
- YouTube - 動画プレイヤー
- Vimeo - 動画プレイヤー
- CodePen - コードデモ
- Google Maps - 地図埋め込み
- Spotify - 音楽プレイヤー
- SoundCloud - 音楽プレイヤー
- その他、iframe埋め込みを許可しているサービス
まとめ
このテストページでは、3種類の埋め込みコンポーネントが正常に動作し、すべてにスケルトンローディングエフェクトが実装されていることを確認できます。外部コンテンツの読み込み中も、スケルトンエフェクトによってスムーズなユーザーエクスペリエンスを提供します。
実際に埋め込み可能なコンテンツ（YouTube、CodePen、Google Maps、Spotify）を使用しているため、すべてのコンテンツが正常に表示されます。