video_007
video_001のアレンジバージョン。スマホ時に動画が縦横比1:1になる設定です。スマホでは自動的に動画の左右がトリミング(隠れて表示されない)されますので、それを考慮した動画の用意が必要です。
video_006
Youtubeの縦型ショート動画をカスタムタグで埋め込むBlockDesign。再生アイコンイメージを個々のカラムのhtmlで指定する「video_005が動作しない時に利用する予備設定」です。見た目はvideo_005と変わりません。
video_005
Youtubeの縦型ショート動画をカスタムタグで埋め込むBlockDesign。動画IDで動画とサムネイル画像を指定するだけで、モーダル再生させる設定です。javascriptで共通の再生ボタン画像に指定しています。
video_004
Youtubeの縦型ショート動画をカスタムタグで埋め込むBlockDesign。ショート動画上で右クリックし「埋め込みコードをコピー」から貼り付けてwidth・height部分を削除するだけで、縦型動画として表示されます。
video_003
モーダル再生で動画を埋め込む
通常YouTubeの動画を埋め込むと埋め込まれたところでそのままのサイズで再生されます。
video_003は、クリックすると全体が若干透明設定の黒い背景になり、その中央部でYouTubeの動画が再生される設定としました。下のサムネイル画像をクリックしBlockDesignのページで確認可能です。
video_002
YouTube動画をカスタムタグで埋め込む
YouTubeの動画のページで、「共有>埋め込み」で表示されるiframeタグをコピーしてBiNDupのカスタムタグに貼り付けることで、カスタマイズが可能になります。
iframeタグを貼り付けて直接編集するため、手間になりますし、ミス(消してはいけない"を消してしまった 等)したら表示されなくなってしまう可能性があるなど、多少の経験・慣れが必要かもしれませんが、カスタマイズによっての効果は結構いい感じだと思います。
video_001
カスタムタグに直接videoタグで書き込んで、属性表記で自動再生にすると下のように動画が表示されます。
繰り返し再生にしないで、コントローラーの表示もしないでビルボードいっぱいに大きく表示させ、再生が終わった時には文字が動画の上に表示されているような感じに使えるBlockDesignです。