2013年10月03日 (木) | Edit |
最近 動画に はまりまくっていますよ。

写真だけでは、伝わらないところに
動画の良さがあります。

自分が もし 美人で 声も キレイなら・・
自分が 出演したいくらいです。(笑)

ところで、パソコンから 見た時と
スマホから 見た時、youtube 動画 って
はみだしてうつるんですよね。

で・・

検索したところ
最適化できることが 判明。


スタイルシートに 以下のタグを挿入します。
スタイルシートは、1番下の行で ダイジョウブです。

ただし 注意してほしいのは
スマホ用の スタイルシートに 書き込むという点だけです。

超簡単 スマホ用 スタイルシートに記述する内容




.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 300px;
}


次に You tube の タグを Div で 囲います。
こんなかんじです。

You Tube の タグを div で囲みます



<div class="youtube">YouTubeの埋め込みコード</div>


私は、1番最後のを → max-width: 300px; に調整してみましたが
他のサイトでは、600のところもありました。
この数字によって 600以上の幅にしないでと 命令するものらしいです。

パソコンから見えるときは、ちゃんと 表示されていても
スマホから見ると 動画 はみ出してるのって
ちょっと悲しいです。ww

私は、待ち時間やスキマ時間に スマホから 自分の
サイトのチェックをしますが、
スマホは、今の時代 欠かせないアイテムなので
アフィリエイトを やってる人は、意識すると
イイかもしれません。

これは、普通に 書いた youtube 動画・・

(例)

<iframe width="420" height="315" src="//www.youtube.com/embed/ho530oif7Fw" frameborder="0" allowfullscreen></iframe>

(動画)



このように 書くと

スマホから見ると・・

neteitaiduag1.jpg
(はみ出してしまっています)

(例)

<div class="youtube"><iframe width="420" height="315" src="//www.youtube.com/embed/ho530oif7Fw" frameborder="0" allowfullscreen></iframe></div>

(動画)



こう表示されます。


neteitaidouga2.jpg

(はみ出さずに 表示できてる)

パソコンから 見ても 同じように
表示されると 思いますが、
スマホから見ると タグの書き方 1つで
こんな風に なってしまうんですね。
関連記事
コメント
この記事へのコメント
コメントを投稿
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可