ハマログ

株式会社イーツー・インフォの社員ブログ

【EC-CUBE4】好きな場所にyoutube動画を埋め込む

やりたいこと

前回「【EC-CUBE4】カテゴリナビをサイドメニューにカスタマイズ」の続きですが、
サイドメニューの上に動画を追加します。

メニューの上に動画を埋め込みたい

修正手順

まずは埋め込むyoutube動画の埋め込みタグを取得します。
youtubeの動画ページで共有>埋め込み押したら表示されます。

管理画面のコンテンツ管理>ブロック管理で新規ブロックを作成し、
ブロック名とファイル名は任意で
コードにdivタグを作って、その中に埋め込みタグをペースト。
このときはiframeの後ろのwidthとheightを削除してください。
(後でCSSでサイズ指定します)

<div class="video_top">
<iframe src="動画URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

次はコンテンツ管理>レイアウト管理に移動し、
作成した「動画エリア」ブロックをカテゴリナビの上に移動します。
別の場所に設置する場合は設置したいところに移動してください。

最後はCSS管理で下記のCSSを追加して保存します。
余白は自由に調整してください。
他の場所に設置する場合.ec-layoutRole__leftのところは親要素のclass名になります。

.ec-layoutRole__left .video_top {
  margin: 0 20px 20px 20px;
}
.ec-layoutRole__left .video_top iframe {
  width: 100%;
}

完成

  yt   2021年6月10日


関連記事

思わず見入ってしまう、面白い404エラーページを調べてみた!(パート2)

前回、404エラーページを調べてみましたが、まだまだ紹介しきれなかったので今回も…

EC-CUBE4始めました

最近Nintendo-Switchを買い、毎晩3D酔いして老いを感じている、fu…

Adobe XD検定をやってみました

偶然にAdobeの公式サイトでAdobe XD検定というものを見つけました。 最…


← 前の投稿

次の投稿 →