ブロックサンプル：動画（1/1）

動画（1/1）

ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。

画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。

sample-08208 / core/video　基本形

sample-08209 / core/video　autoplay：autoplay=false

sample-08210 / core/video　autoplay：autoplay=true

sample-08211 / core/video　caption：caption="短いサンプル"

sample-08212 / core/video　caption：caption="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-08213 / core/video　controls：controls=false

sample-08214 / core/video　controls：controls=true

sample-08215 / core/video　loop：loop=false

sample-08216 / core/video　loop：loop=true

sample-08217 / core/video　muted：muted=false

sample-08218 / core/video　muted：muted=true

sample-08219 / core/video　poster：poster="https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-landscape.png"

sample-08220 / core/video　poster：poster="https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png"

sample-08221 / core/video　preload：preload="auto"

sample-08222 / core/video　preload：preload="metadata"

sample-08223 / core/video　preload：preload="none"

sample-08224 / core/video　src：src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"

sample-08225 / core/video　width：width=25

sample-08226 / core/video　width：width=50

sample-08227 / core/video　width：width=75

sample-08228 / core/video　width：width=100

sample-08229 / core/video　height：height=80

sample-08230 / core/video　height：height=160

sample-08231 / core/video　height：height=240

sample-08232 / core/video　playsInline：playsInline=false

sample-08233 / core/video　playsInline：playsInline=true

sample-08234 / core/video　tracks：tracks=[]

sample-08235 / core/video　tracks：tracks=[{"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.vtt","kind":"subtitles","srclang":"ja","label":"日本語","default":true}]

sample-08236 / core/video　align：align="left"

sample-08237 / core/video　align：align="center"

sample-08238 / core/video　align：align="right"

sample-08239 / core/video　align：align="wide"

sample-08240 / core/video　align：align="full"

sample-08241 / core/video　align：align=""

sample-08242 / core/video　lock：lock={"move":false,"remove":false}

sample-08243 / core/video　lock：lock={"move":true,"remove":false}

sample-08244 / core/video　lock：lock={"move":false,"remove":true}

sample-08245 / core/video　lock：lock={"move":true,"remove":true}

sample-08246 / core/video　anchor：anchor="sample-anchor"

sample-08247 / core/video　className：className="block-gallery-example"

sample-08248 / core/video　余白の組み合わせ：style.spacing.padding={"top":"0","right":"0","bottom":"0","left":"0"} / style.spacing.margin={"top":"0","right":"0","bottom":"0","left":"0"}

sample-08249 / core/video　余白の組み合わせ：style.spacing.padding={"top":"1em","right":"1em","bottom":"1em","left":"1em"} / style.spacing.margin={"top":"1em","right":"1em","bottom":"1em","left":"1em"}

sample-08250 / core/video　余白の組み合わせ：style.spacing.padding={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"} / style.spacing.margin={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}

sample-08251 / core/video　extraBottomMargin：extraBottomMargin=""

sample-08252 / core/video　extraBottomMargin：extraBottomMargin="0"

sample-08253 / core/video　extraBottomMargin：extraBottomMargin="2"

sample-08254 / core/video　extraBottomMargin：extraBottomMargin="10"

sample-08255 / core/video　extraBottomMargin：extraBottomMargin="20"

sample-08256 / core/video　バリエーション：Video

sample-08257 / core/video　バリエーション：GIF