YouTubeをファーストビューで自動再生
ファーストビューにYouTubeが横幅いっぱいで表示されるようにするサンプルです。
内容としては
- CSSでタイトルセクションを非表示にし、コンテンツと上部の隙間をなくします。
- YouTubeをhtml挿入機能を使って貼り付けます。
- CSSでYouTubeの横幅が最大になるように設定します。
の手順になります。
※スマホで自動再生されない端末がある点、デフォルトでミュートになっている点に注意してください。
1. CSSでタイトルセクションを非表示にし、コンテンツと上部の隙間をなくす
管理画面から以下のCSSを追加してください。デザイン設定でのCSSでなく、ページ設定→設定したいページの「編集」から、追加CSSで追記してください。3に関しても同じです。
2. YouTubeをhtml挿入機能を使って貼り付け
- YouTubeを開いて、共有→「埋め込み」を選択して<iframe>から始まる文字列をコピーしてください。
- その後ページにしたいNotionページで、コンテンツの一番上に /code でコード埋め込みを選択し、1のコードを貼り付けてください。
- その際に をYouTubeで発行したURLの末尾に付与します。
3. CSSでYouTubeの横幅が最大になるように設定します。
2で貼ったページをWraptas上で表示してください。
タイトルが表示でYouTubeが自動再生されていたらOKです。
1と同じく以下のCSSをページ設定へ反映させます。
その際、そのWraptasページのソースを見るとで埋め込んだYouTube部分が というクラスで囲まれていると思います。その部分のid(block-123456abcdefのような文字列)を取得し、以下のサンプルCSSのidと差し替えてご利用ください。