こんばんは！
apa（あぱ）です(^^)
今日は、 『SIRIUS(シリウス)にYouTubeの動画を埋め込む方法』について書いていきます。
サイト作成ツールとして、アフィリエイターの間で愛用され続けているSIRIUS(シリウス)。
何回か、このサイトでも、SIRIUS(シリウス)についての記事を投稿してきました。
今回は、またそんなSIRIUS(シリウス)シリーズです。
僕自身、アフィリエイトサイトは全部SIRIUS(シリウス)で作っているので、やっぱり慣れているんですよね（笑）
でも、先日、ふとした壁にぶつかりました。
SIRIUS(シリウス)にYouTube動画を埋め込むと画面からはみ出る
はい、なんですか？
ありがとうございます！
・・・実は、あるYouTubeの動画を自分のアフィリエイトサイト内に埋め込みたくて・・・
試しに、YouTubeの「埋め込みコード」っていうのを、SIRIUS(シリウス)に貼り付けてみたんですけど・・・
スマホで見たときに、画面からはみ出してしまったんです・・・！
ああ、その問題ですね。
確かに、僕もその問題、ぶつかりました。
本当ですか？
どうしたらいいのかわからなくって、お手上げ状態なんです。
なるほど・・・
ネットで解決策を調べましたか？
もちろん！
apaさんに頼りっきりじゃいけないと思って、ネットで、
『SIRIUS YouTube 埋め込み スマホ』
で検索してみて、出てきた方法を実践してみました。
・・・でも・・・
でも？
上位に出ているサイトの通りにやっても、うまくいかなかったんですよ・・・
なるほど・・・
実は、SIRIUS(シリウス)のサイト内にYouTube動画を貼り付けて、スマホでも最適化させるのはすごく簡単なんですよ。
このエピソード。
冒頭で書いたように、僕自身が直面した問題です。
もしかしたら、おわかりかもしれませんけど・・・
僕はパソコンがあまり得意ではありません（笑）
なので、周りの人たちが、パソコン関連のテクニカルな話をしていても、たいがいついていけません。
CSSとか、HTMLとか、実はあまりよくわかっていません。
そんな人でも、アフィリエイトをやっているんだから、改めて、アフィリエイトって夢のある仕事ですね。
実は、このWordpressもかなりギリギリです（笑）
で、話を戻して。
そんな状態だから、SIRIUS(シリウス)のサイト内に、YouTubeの動画を貼り付けるのも一苦労でした。
わかりますか？
こんな感じで、右半分の画面が、はみ出ちゃうんです。
実際の画面で見ると、もっと悲惨なことになっています。
SIRIUS(シリウス)のヘビーユーザーで、かつ僕みたいにパソコンがあまり得意でない方は、きっと同じような悩みを抱えているはず・・・（？）
ということで、僕が実践した、SIRIUS(シリウス)のサイトにYouTube動画を埋め込んで、なおかつスマホで最適化する（画面からはみ出ない）方法をご紹介します。
わかってみると、なんらむずかしいことはなくて・・・
と思ってしまいました（笑）
まぁ、至ってシンプルだったんです（笑）
SIRIUS(シリウス)のYouTube埋め込み動画をスマホで最適化させる方法
え？簡単なんですか？
でも、いろいろ試したけど、うまくいきませんでしたよ？
うーん、たぶんなんですけど、Googleの検索結果上位に出てくる情報が、ちょっと古いのが多いんじゃないかな？と思います。
普通にやってみたら、普通にできました（笑）
ええ？
どうしたらいいんですか？
わかりました。
手順を解説しますね。
SIRIUS(シリウス)のYouTube動画を埋め込む手順
以下の通りにやってみてください。
YouTubeの「埋め込みコードをコピー」
まずは、貼り付けたいサイト内に表示させたいYouTube動画のページを開きます。
そして、その動画のところにカーソルを持っていって、右クリック。
出てきたメニューの
「埋め込みコードをコピー」を左クリックします。
SIRIUS(シリウス)のYouTube動画を埋め込みたい箇所で右クリック
次に、SIRIUS(シリウス)を開いて、YouTube動画を表示させたい箇所をクリック。
そこで、右クリックをします。
すると、メニューが表示されます。
「パーツ挿入」～「YouTube・Googlemapのタグ」選択
メニューの中に、「パーツ挿入」という項目があるので、そこにカーソルを持っていきます。
すると、何もクリックしないでも、自動的にその右に追加メニューが表示させるので、その中の、
「YouTube・Googlemapのタグ」
をクリックします。
すると、自動的に、上図のような「パーツ挿入タグ」が生成されます。
ちなみに、発行されるタグはこちらです。
<div class=”gmap-box”>
</div>
生成されたタグの間に「埋め込みコード」を貼り付け
先ほど、発行されたタグの間に、サイト内に表示させたいYouTubeの埋め込みコードを貼り付けます。
<div class=”gmap-box”>
<iframe width=”480″ height=”360″ src=”https://www.youtube.com/embed/KXP84ijiLbg” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>
</iframe>
</div>
今回の例で言うと、上記の赤い部分です。
アップロード
そのあとは、通常通り、SIRIUSのサイトをアップロードするだけ。
サイトが反映されるまでは、少し時間がかかるかもしれませんが、ちゃんと成功すれば、このようになります。
やっぱり、ちゃんと枠内に収まっている方が綺麗に見えますね。
↑これが
↑これになりました。
ちゃんと、YouTube動画がスマホの画面でも最適化されています！
とっても簡単ですよね！
SIRIUS(シリウス)のサイト内にYouTube動画を埋め込むメリット
一応、念のために解説しておくと。
SIRIUS(シリウス)のサイト内に、YouTube動画を埋め込むメリットですけど・・・
正直、「SEO効果」はそこまで多くはないのかな？
と思います。
ただ、やっぱり。
ユーザー目線に立つと。
「その商品に関するYouTube動画があると興味を惹かれる」
のは確かだと思います。
貼る位置や、何の動画を選ぶか？
などの問題もありますが。
ユーザーの役に立ちそうだな、と思うYouTube動画は適所に貼っていきましょう。
ただし。
貼りすぎはサイトが重くなってしまうので、多くてもサイト内に1つだけくらいがいいのかな、と思います。
また、全部のサイトに貼る必要はないと思います。
「ただYouTube動画を貼るだけ」
だとあまり意味がありません。
「ユーザーにインパクトを与えられる（良い意味で）動画」
があったときだけ、貼るのがいいと思います。
まとめ
本当だ！とっても簡単なんですね！
- YouTubeの動画で「埋め込みコードをコピー」
- SIRIUS(シリウス)内で「パーツ挿入」～「YouTube・Googlemapのタグ」を活用
- ユーザーに良い意味でインパクトを与えられる動画で活用する
そういうことなんですね！
そうですね！
とっても簡単なので、必要に応じて使っていきたいですね！
わかりました！
ありがとうございます！
さっそくやってみます！
最後まで読んでいただいてありがとうございます。感想、ご質問等がございましたら、お気軽にコメントをどうぞ(^^)
もしよければ、こちらから応援をお願いします。
よりお役に立てる記事を書けるようがんばれます(^^)
コチラ↓↓をクリックしてapaを応援
コメント