ハマログ

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

【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日


関連記事

【EC-CUBE4】カテゴリナビをサイドメニューにカスタマイズ

やりたいこと EC-CUBE4デフォルトのテンプレートを使ってカスタマイズする案…

SmartyテンプレートへのPHP記述方法について

どうも!宇都宮です! 今回は業務の備忘録を書きたいと思います。 Smartyへの…

UI/UXデザイナーLT会を参加してきました!

先日、LT会という形式のイベントを参加してきました。「LT会」とは「ライトニング…


← 前の投稿

次の投稿 →