TOPへのYouTube動画の掲載について

質問一覧対象テーマ: MasterpieceTOPへのYouTube動画の掲載について
horihori asked 3年 前

お世話になっております。
MASTERPIECEのTOPにYouTube動画を掲載することは可能でしょうか?
デザインの購入を考えていますが
TOPにYouTube動画を掲載できればと思っております。

もしできないようでしたら
MASTERPIECEのデザインと類似している
TOPにYouTube動画の掲載ができるデザインをご紹介いただければと思います。

4 Answers
baseadminBaseDesignInfo Staff answered 3年 前

ご質問ありがとうございます。
MASTERPIECEについて、テーマの設定でできることとしては現状では「最大4枚までの画像スライダー(1枚の場合は固定)」という仕様になっていますが、ちょっとしたHTML編集のカスタマイズによってYouTube動画を埋め込むことは可能です。
HTML編集は絶対できないという方や、初めてでも解説があればできてしまう方など、色々なので「かんたん」かどうかは断言できないのですが、もし抵抗がなければ十分できると思います。
具体的な方法はこちらでサポートできますので、もしMASTERPIECEご利用の際はこのトピックにお知らせください。
 
レイアウトはあまり似ていないのですが、Relationというテーマは動画を押し出したデザインとしてご好評いただいています。
https://design.thebase.in/detail/76
 
どうぞ宜しくお願いいたします。

horihori answered 3年 前

お世話になっております。
ご回答とご提案ありがとうございました。
MASTERPIECEのデザインを購入させていただきました。
HTML編集のAppsのインストールも行いました。
お手数ではございますが、YouTube動画の挿入方法をご教示いただければと思います。
何卒よろしくお願いいたします。

baseadminBaseDesignInfo Staff answered 3年 前

MASTERPIECEのヘッダー画像部分を直接書き換えるには、

  1. まずテーマ設定の「【TOP】メイン画像2〜4(スライド)」に画像がない状態にしてください。2番以降に画像が入るとスライドになってしまうためです。1枚目の部分はこれから消してしまうので、あってもなくても構いません。
  2. HTML編集画面でMASTERPIECEのコード293行目あたりに「<div id=”MainVisual”>〜</div>」というタグがあると思います。この「〜」の部分を全て削除し、その場所にYoutube動画画面から取得した埋め込みコードを貼り付けます。
  3. コードが「<div id=”MainVisual”><iframe>Youtubeのタグ</iframe></div>」という形になればOKです。
  4. 「プレビュー」をしてみるとメイン画像のエリアにYouTubeの動画が表示されていると思います。そのまま「保存」して、「変更内容をショップページに反映しますか?」で「はい」することで、カスタマイズがショップに反映されます。
  5. 次に動画を表示エリアにフィットさせレスポンシブにするため、テーマ設定の一番下にある「【上級者向け】独自スタイルシート」という欄に次のコードをペーストしてください。

#MainVisual {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
#MainVisual iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


これで動画が上手くフィットして表示されます。
※当然ながら、このカスタマイズをした状態ではテーマ設定の「【TOP】メイン画像」は使えなくなりますので、動画を変更したい場合は同じように直接埋め込みコードを入れ替えてください。画像に戻したい時のために、バックアップを取っておいてください。

horihori answered 3年 前

ご回答ありがとうございます。
YouTube動画を埋め込みすることができました。
とても分かりやすかったです。
 
また、ご質問させて頂き事があるかと思います。
その時は何卒宜しくお願い致します。

baseadminBaseDesignInfo Staff replied 3年 前

よかったです!また何かあればご質問ください。