完成形は
早速ですが完成したものはこちらです
管理画面の表示
管理画面上はこのような表示になります
動画については
- 自動再生
- コントロール
- ループ
- ミュート
- 動画のサイズ
が制御できるようにしています。
コードサンプル
コードはこちらです↓↓（丸っとコピペで大丈夫かと）
{%- style -%}
.c_video {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: auto;
}
.c_video-player {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.c_video-section {
width: {{ section.settings.width }}%;
margin: auto;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top-sp }}px;
padding-bottom: {{ section.settings.padding_bottom-sp }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top-pc }}px;
padding-bottom: {{ section.settings.padding_bottom-pc }}px;
}
}
{%- endstyle -%}
<div class="c_video-section section-{{ section.id }}-padding">
<div class="c_video">
<video class="c_video-player"
{% if section.settings.auto_play %}autoplay{% endif %}
{% if section.settings.control %}controls{% endif %}
{% if section.settings.loop %}loop{% endif %}
{% if section.settings.muted %}muted{% endif %}
playsinline
>
<source src="{{ section.settings.url }}" type="video/mp4" />
お使いのブラウザはこの動画に対応していません。
</video>
</div>
</div>
{% schema %}
{
"name": "c_カスタムビデオ",
"tag": "section",
"settings": [
{
"id": "url",
"type": "url",
"label": "動画ファイルのURL"
},
{
"type": "header",
"content": "動画設定"
},
{
"type": "checkbox",
"id": "auto_play",
"label": "自動再生",
"default": true
},
{
"type": "checkbox",
"id": "control",
"label": "コントロール",
"default": true
},
{
"type": "checkbox",
"id": "loop",
"label": "ループ",
"default": true
},
{
"type": "checkbox",
"id": "muted",
"label": "ミュート",
"default": true
},
{
"type": "header",
"content": "動画のサイズ"
},
{
"type": "range",
"id": "width",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "横幅",
"default": 100
},
{
"type": "header",
"content": "上下の余白"
},
{
"type": "range",
"id": "padding_top-pc",
"min": 0,
"max": 200,
"step": 2,
"unit": "px",
"label": "上（デスクトップ）",
"default": 36
},
{
"type": "range",
"id": "padding_bottom-pc",
"min": 0,
"max": 200,
"step": 2,
"unit": "px",
"label": "下（デスクトップ）",
"default": 36
},
{
"type": "range",
"id": "padding_top-sp",
"min": 0,
"max": 200,
"step": 2,
"unit": "px",
"label": "上（モバイル）",
"default": 36
},
{
"type": "range",
"id": "padding_bottom-sp",
"min": 0,
"max": 200,
"step": 2,
"unit": "px",
"label": "下（モバイル）",
"default": 36
}
],
"presets": [
{
"name": "c_カスタムビデオ"
}
]
}
{% endschema %}
schemaのcheckboxを使って属性の付け替えを行なっています
{% if section.settings.auto_play %}autoplay{% endif %}
{% if section.settings.control %}controls{% endif %}
{% if section.settings.loop %}loop{% endif %}
{% if section.settings.muted %}muted{% endif %}
動画の横幅もschemaのrangeを使って可変できるように
.c_video-section {
width: {{ section.settings.width }}%;
margin: auto;
}
上下の余白も可変できるようにしてあげると汎用性上がります！
（毎回個別でpaddingつけるの面倒ですしね。。）
またセクションを使い回す際も個別で余白をつけれるからおすすめです！！
上下の余白をセクションにつけるやり方はこちら！
最後に
Dawnのデフォルトでは動画ファイル（MP4）を埋め込めるセクションがありません。
（youtubeやvimeoを埋め込めるセクションはあります）
動画ファイル（MP4）も埋め込めたいという要望は結構あります。
動画ファイルは重いのでサイトスピード的にはあまり入れない方がいいと個人的には思いますが見栄えはとても良くなります！
今回の実装では
schemaのcheckboxやrangeの使い方など少し応用を効かせていますが
特に難しいことは何もやってないので誰でも簡単に作れると思います！！
誰かの参考になれば嬉しいです！質問等お待ちしてます＾＾
