ハマログ

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

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


関連記事

Chromeでpdf開いたら”¥”がバックスラッシュで表示されてた話

どうも!娘から風邪を貰って絶賛喉が痛い宇都宮です! 今回はChromeブラウザで…

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

先日、Twitterを見ていて、あるリンクを押したところこんなエラーページが表示…

PHP5.6でカード決済できない

こんにちはいけしまです。もう少しで冬休みですね。早い方はもうお休みでしょうか。 …


← 前の投稿

次の投稿 →