モーダル再生で動画を埋め込む

 
通常YouTubeの動画を埋め込むと埋め込まれたところでそのままのサイズで再生されます。
 
video_003は、クリックすると全体が若干透明設定の黒い背景になり、その中央部でYouTubeの動画が再生される設定としました。下のサムネイル画像をクリックしてお試しください。

ブロックに配置するのは画像で、クリックすると指定したYouTubeのURLをモーダルで表示・再生します。画像にはSiGNで再生マークを重ねたり、まったく別の画像を作って利用するなども可能です。

吾輩は猫である。名前はまだ無い。 

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

2カラムで動画を配置

吾輩は猫である。名前はまだ無い。 

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 

吾輩は猫である。名前はまだ無い。 

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。


  • カスタムタグで埋め込んであるscript内の記述変更で、モーダルウィンドウの背景色、透過度の変更が可能です。

Tablet View

SP View