youtube埋め込み動画をレスポンシブにしたかったのが意外と苦労した件。

ちょっとした変更で、意外と時間を消費して苦労したので、備忘録です。

運営するwebサイトに埋め込むyoutube動画がレスポンシブ対応になっていなくてかなりダサい感じだったので対応しました。

CSS

肝になるCSSについては、こちらの記事を~~○パクリしました。~~参考にさせていただきます。

多くは、divタグをそのままhtmlソースコード上で手打ちすることで、指定を実現すると思います。

ところが今回少し事情が違いました。

youtubeの埋め込みに必要なソースコードは、埋め込みコードを直接書き込むのではなく、動画のidを入力すると、自動で埋め込みコードを生成してくれるプログラムを利用させてもらってました。

このプログラムで生成される埋め込みコードが、シンプルにiframeタグのみを生成してくれていたのですが、上記CSSを使うためには、どうしてもレスポンシブ対応のために必要なdivタグでラップされた状態で生成されてほしかったので、ちょっと改変の必要がありました。

git上で公開されているプログラムを流用させていただいてるのですが、一応オープンソースで使ってもいいよ、と言ってもらってるものなので、改変はできると。

いったん打ち込んだ情報が、変換されて出力します。この時に、変換を担っていたのがPHPだったので、それに変更を加えました。

一旦ローカルで編集してもよかったのですが、直接サーバにリモートアクセスしてvimで編集しました。

ソースコードがエラーになり、サイトが利用できなくなりました。

phpソースコードにそのままダブルコーテーションを含むコードを入力してしまったのが原因でした。って当たり前すぎてやってるつもりだったから、逆に原因がわからなくてテンパりました。

特に間違ったことは入力していなかったつもりだったので、「気が付かないうちにどこかにへんな打ち込みをしてしまったのかも」「特定面倒だ」となりました。

結局、一旦プログラムを根こそぎ削除して、git経由でインストールしなおしました。これが一番早いね。

ということで、気を取り直して、もう一度同じようにVimで編集しました。同じエラーがでました。（当たり前

ここでようやく、自分がやってるつもりでやってないことがあったことに気が付きました。良かったね。

今回はバックスラッシュを採用しました。

シングルクォーテーションとダブルクォーテーションを組み合わせる方法もあるね。

やってるつもりが一番、問題の特定を遅らせる。

基本的なことから見直すことが大事ですね。