baserCMSを利用したサイトの設定も終わったので、あとは更新するのみ！と思っていたのですが、忘れてたことがありました。

Youtube動画などのスマホ最適化・・・
PCで見ている時は問題ないのに、スマホで見ると横にガーッとはみ出しているっていうアレです。

baserCMSだと、どうすればいいのだろう・・・
漠然と不安を感じましたが、思った通り途中でひっかかりました。

baserCMSの場合、どの方法だとスマホではみ出さない？

WordPressでYoubute動画をスマホ最適化する方法

私が知っている方法だと↓この2つ。

• CSSで設定して、投稿の際にclass指定してタグを記載する。
• プラグインを利用する（私はAdvanced Responsive Video Embedderを利用中）

詳しい方法は後日記事にまとめます。

baserCMSの場合だと、情報が全然検索エンジンでヒットしない！！(T_T)
まずはこれに困りました。え～～っみんな動画導入しないの～～？？？

しかたがないので、自分で適当に試してみることに。

プラグインやタグの書き方など色々試してみた結果

Youtubeの動画の共有から取得する埋め込みコードのiframeタグは反映されるみたいですね。
記事を書いている時は動画は表示されずBOX表示ですが、プレビューURLから確認するとちゃんと動画は見れます。

ということは、動画を挿入すること自体は簡単なわけです。
でも、スマホで見るとはみ出す。(＞0＜)　これがやっぱり解決しない。

プラグインはどうかというと、現状では厳しいですね。
私が利用できるプラグインをわかっていないのか、使い方をわかっていないのかどうかは不明ですが、初心者であればCSSでサッサとすました方がいいかと思いました。

無料プラグインに「oEmbed 有効化」というものがあって、oEmbed 有効化をインストールするととても楽ちんに動画の埋め込みは可能だけど、やっぱりスマホだとはみ出す・・・

あと、動画に限らず画像でも幅を100％指定して、縦は自動的に！って書き方をする時があります。width=”100%″ と書く代わりにheigthを削除したりするわけですが・・・
それでiframeタグを書き直すと、確かに横にははみ出さないけれど、高さがおかしくて見づらいことに。画像と同じようには、すんなりキレイに表示されてくれませんでした。

baserCMSもスマホ最適化するならCSS（スタイルシート）で！

とりあえず、同じCMSなのだから、WPと同じようにやればいいのでは？と思って、Wordpressとまったく同じ手順で試してみることに・・・

結果を言うと、WordPressと同じ手順でCSSに情報を追加して記載すれば可能でした。
追加するファイルを探すのは迷いまくりましたけど。

どのファイルに追加すれば良いのかさえわかれば簡単です。

CSSに追加する情報と記事での記載方法

WordPressだと、テーマによって違いはありますが、style.cssに情報を追加したりしますよね。
ここが、baserCMSだとわかりづらかった！style.cssではないですよ～。
ぐるぐる時間がかかったのはここだけ（笑）

style.cssに追加してもダメという時点で、？？？この方法はダメなのか？と、収集つかなくなりましたね（笑）とりあえず、すべてのCSSに貼り付けて確認すればよかったです。

baserCMSで、ratio_3_2のテーマを利用した場合、bootstrap.min.cssに情報追加します。
まさかこのファイルとは・・・
実際に編集画面を見るとわかるのですが、style.cssやconfig.cssは、キレイに改行されて書かれており、よく見るcssファイルって感じでした。しかし、それ以外の3つのファイルは、改行もなくびっしり敷き詰められて書かれていたので、「これはいじってはいけないものなのか？」なんて不安になったんですよね。CSSってよくわかっていないので。

それに、WPだとstyle.cssというイメージが強く頭にあったせいで、何がどういけないのかわからず時間がかかりました。

最終的に、cssに全部貼って再度試すしかない！とやってみた結果、うまくいったのがbootstrap.min.cssだったということです。
では、タグを追加してみましょう。

bootstrap.min.cssに追加＆保存

テーマ管理から、現在利用しているテーマの青い管理ボタンをクリックします。

css一覧をクリックすると、5つのCSSファイルが並んでいます。
この中のbootstrap.min.cssを編集します。

念のため、テキストエディタなどにコピーしてバックアップをとってから始めましょう。
そして、一番下に↓下記の内容を追加します。

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

※youtubeという部分は、任意でお好みの名前でOKです。
保存ボタンをクリックしておきましょう。
スタイルシートの設定はこれだけ！(￣∇￣*)b

記事に投稿する時のタグの書き方

では、実際に投稿してみた記事を参考に、投稿の仕方を確認します。

動画部分は、投稿画面のソースボタンを押した状態で、divタグで埋め込みタグを挟むように記載します。

<div class=”youtube”>
<iframe allowfullscreen=”” frameborder=”0″ height=”315″ src=”URL” width=”560″></iframe>
</div>

※CSSに「youtube」と書かなかった人は、記載した文字にしてくださいね。

ソースボタンを再度押して元に戻ると、こんな感じになっています。

一瞬「えっ！？」と思いますが、一度非公開の状態で保存すると上にプレビューURLが表示されるので、クリックして確認しましょう。動画はちゃんと表示されて見えますよ。

試しに投稿した記事で、最適化されているか確認してみてください。
ラジオ体操動画を探してきました

このテーマはレスポンシブデザインなので、ブラウザの横幅を狭くしていけば、画面サイズに合わせて動画も小さくなっていきます。スマホでもはみ出しません。