これで簡単PC→スマホへのYouTube動画のレスポンシブ

子育て生活/LIFE

WordPressでレスポシィング対応が超簡単解決!

2ヶ月くらいあきらめていたYouTube動画のスマホ表示で、レスポンシブ対応に手こずって放棄しかけていたのですが、本日無事簡単に解決してしまったので、私と同じことでお悩みの方へシェアします。

きっかけはテーマの更新

最初はたくさんの方のブログから拝見してPC→スマホへのYoutube動画のレスポンシブ対応は上手く表示させることができていました。

表示方法はHTMLにコードを入れて、CSS追加対応で直接CSSをいじらずにする方法で行い、問題なく表示確認ができたのですが、私の使用しているテーマのTCDを更新した後で同じようにしても、レスポンシブ対応が反映しないということに陥りました。

ページの更新をしようとも、CSSに直接コードを追加しようとも何しても無理でした。もちろん溜まったキャッシュの削除なんかも試したのですが、それもすべて無駄に終わり、プログラミングに詳しくもない私がこれ以上すすむのは困難だなって・・・諦めかけていた今日・・・!!!

一発逆転という感じであっさり簡単にレスポンシブ表示ができましたーーーー!!!

ではさっそくレスポンシブ対応にしましょう!!

①★まずは外観からテーマ編集へすすんでください。

②★編集するテーマはあっているのかを確認して、下のようにstyle_sp.CSSを選択します。

③★あとはコードを貼り付けるだけです!

 

画像の拡大が上手くできなくて見えにくいので、補足です。

SCCに直接下のコードを挿入してくださいね!

iframe{ width: 100%; }

そうしたらファイルの更新でOKです!

 

私は念のためコピペミスしても、わかりやすく入れなおせるように一番下の段へ入れました。

 

どうしてこれだけでいいのかわかりませんが、これまでたくさん貼り付けていたコードなんて、必要なかったみたいです。

私は10段くらいになるコードを入れていましたが、詳しい方のコードはすべてこれくらいになっていたので、これが普通なんだと思っていたのですが、このテーマだけなのか・・・?

よくよくコードをみてみるとiframe(フレーム)・width(幅)だけの指定です。

これならばTCDだけに限らず他のテーマでもいけそうな気がします。

 

ちなみに、横長の動画にしたい方は次のコードの追加が必要ですので、追加して上げてください。

iframe{ width: 100%; height:auto; }

 

TCDの方が書いたサイトをから参考にしました高いと思います。

リンク先はこちらTCDLABO

 

 

 

コメント

タイトルとURLをコピーしました