Embed Demo
動画埋め込みの標準機能（生iframe）とhl-embedコンポーネントの比較デモです。
どちらも同じ動画を表示しますが、コンポーネント版はURL変換・スタイルを自動で処理します。
YouTube
標準機能
<iframe> 直書き
Standard
キャプションは <p> で手書きする
<!-- 視聴URLを手動でembed URLに変換する必要あり -->
<!-- https://www.youtube.com/watch?v=4TstQhTJ6zA -->
<!-- ↓ 手動で変換 -->
<!-- https://www.youtube.com/embed/4TstQhTJ6zA -->
<!-- レスポンシブ対応のラッパーCSSも自前で書く -->
<div style="position:relative; width:100%; aspect-ratio:16/9;
border-radius:12px; overflow:hidden; background:#000;">
<iframe
src="https://www.youtube.com/embed/4TstQhTJ6zA"
style="position:absolute; inset:0; width:100%; height:100%; border:0;"
allowfullscreen
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
loading="lazy"
title="YouTube動画">
</iframe>
</div>
<p>キャプションは手書き</p>
コンポーネント
<hl-embed>
Component
<!-- 視聴URLをそのまま渡すだけ。embed変換・CSSは自動 -->
<hl-embed
url="https://www.youtube.com/watch?v=4TstQhTJ6zA"
caption="キャプションはcaption属性に書くだけ">
</hl-embed>
ニコニコ動画
標準機能
<iframe> 直書き
Standard
キャプションは <p> で手書きする
<!-- nicovideo.jp/watch/sm... を embed.nicovideo.jp/watch/sm... に手動変換 -->
<!-- https://www.nicovideo.jp/watch/sm17944074 -->
<!-- ↓ 手動で変換 -->
<!-- https://embed.nicovideo.jp/watch/sm17944074 -->
<div style="position:relative; width:100%; aspect-ratio:16/9;
border-radius:12px; overflow:hidden; background:#000;">
<iframe
src="https://embed.nicovideo.jp/watch/sm17944074"
style="position:absolute; inset:0; width:100%; height:100%; border:0;"
allowfullscreen
loading="lazy"
title="ニコニコ動画">
</iframe>
</div>
<p>キャプションは手書き</p>
コンポーネント
<hl-embed>
Component
<!-- 視聴URLをそのまま渡すだけ。embed変換・CSSは自動 -->
<hl-embed
url="https://www.nicovideo.jp/watch/sm17944074"
caption="キャプションはcaption属性に書くだけ">
</hl-embed>
src属性（embed URL直接指定）
url 属性の代わりに src 属性でembed URLを直接指定することもできます。
対応していないサービス（他サービスの埋め込みコード等）でも使えます。
<!-- embed URLを直接指定（URLの自動変換は行われない） -->
<hl-embed
src="https://www.youtube.com/embed/4TstQhTJ6zA"
caption="src属性にembed URLを直接指定した例">
</hl-embed>
まとめ
|
標準 <iframe> |
hl-embed |
| コード量 |
多い（ラッパーCSS＋iframe＋キャプション） |
1行 |
| URL変換 |
手動（watch→embed） |
自動 |
| レスポンシブ |
自前でCSSを書く |
自動（aspect-ratio: 16/9） |
| キャプション |
手書き <p> |
caption属性 |
| 対応サービス |
なんでも可 |
YouTube / Niconico（srcで拡張可） |