wordpressのテーマsimple catchで動画があまりに大きく表示されてしまう。

Question

サイトの記事内にyoutubeの動画URLを打つと、リンクの設定などせずに、勝手に動画のサムネが表示されるのですが、その大きさがPCの場合に大きく表示され過ぎていて困っています。
cssのどの部分の幅や表示設定を変更すればよろしいでしょうか？

どうぞよろしくお願いします。

↓こちらがそのページ例になります。
http://elegant-note.com/japan/acidman-sekitou

Answer 1

動画の掲載の仕方を変えるのも方法の一つです。
YouTubeで共有→埋め込むを押すとiframeタグが表示されるので、それをコピーして任意のサイズに変更する。

<iframe width="560" height="315" src="https://www.youtube.com/embed/W8trhdal3lg" frameborder="0" allowfullscreen></iframe>

CSSなら以下で定義しているのでwidthの値を小さくすれば良いですが、スマホで見た際も同様に狭まりバランスが悪くなるので例えばmax-width:700px;などとしてしまえばスマホで見ても変にはならないと思います。

.fluid-width-video-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
}

または画面幅に合わせて表示方法を変更するような手を使うのもありです。

デバイスに合わせてCSSを振り分ける「Media Queries」
http://dev.classmethod.jp/smartphone/device-media-queries/

Comments

[takoyuki]

いつも素早い回答ありがとうございます。
iframeタグをコピーして、サイズのところを何度か変更してみましたが、一瞬表示されたあとすぐに元の大きさに戻ってしましました。
cssの変更ですが、以前仰っていたxserverなどのファイルマネージャーを利用しないとできないんでしたよね？

[退会済みユーザー]

iframe駄目でしたか…？

これはstyle.cssなので管理画面からでも編集可能です。
ファイルマネージャーかFTPなどを使う方法、頑張って覚えてください。

[takoyuki]

はい。なぜか駄目でした。

style.cssにあるんですか？
Ctrl+Fで"video"とか"fluid"で検索したんですが、出てこなくて…
どういうことなんでしょうか。

[退会済みユーザー]

あ、よく見たらstyles.cssではないですね…
では幅を任意の値に変更してstyle.cssへまるまる追記してみてください。

.fluid-width-video-wrapper {
width: 100%;←ここを変えて
position: relative;
padding: 0;
}

[takoyuki]

50%や70%にしてやってみましたが変わりませんでした。
ブラウザの履歴も消去して試しましたがやはり画面いっぱいいっぱいの大きさで表示されてしまいます。
追記するところは、style.css内であればどこでもいいんでしょうか？(最下部に貼り付けました)

それともうひとつお訊きしたいことが…
私はサイトをx2サーバーで契約しているのですが、その場合でもファイルマネージャーの利用はxserverがよろしいんでしょうか？また、そこで新しくファイルマネージャー用の新アカウントを作成する、ということでしょうか。

[退会済みユーザー]

最下部に追記で大丈夫です。
ではwidth: 70% !important;のように!importantを付けてみてください。
高さがおかしくなったらheight: 〇〇 !important;を加えてください。

後半、意味が分からないのですがXSERVERのファイルマネージャーはXSERVERのサービスなのでXSERVERでしか使えません。
アカウントはサーバーパネルのアカウントと同じだったと思うのでアカウントの作成などは要らないと思います。
できればファイルマネージャーを使うのではなくクライアントソフトを使った方が汎用性があるので、サーバーが変わっても困惑することも無いと思います。

[takoyuki]

!importantを追加しても変わりませんでした。
なにか他の記述で余程影響の強いものがあるのかもしれません…

なるほど。ファイルマネージャーというのは、サーバー毎にあるものなんですね。
クライアントソフトというと、例えばFFFTP等のソフトですよね。
やはりそこが自分で編集できるようにならないと、自由にサイト編集できないんですね。
これから腰を据えて勉強していきたいと思います。

aya03さん、色々と教えてくださり感謝します。
ありがとうございました。

[退会済みユーザー]

多分、何か間違ってるんじゃないかと思います。
そのテーマではYouTubeなどの動画があるとJavaScriptで勝手にサイズを決めてしまうので、それが要らなければ
/wp-content/themes/simple-catch/functions/core.phpの151行目の
wp_enqueue_script( 'jquery-fitvids', get_template_directory_uri() . '/js/fitvids.min.js', array( 'jquery' ), '20130324', true );
この記述を無効にすれば自由にiframeで幅と高さが決められますが、動画を埋め込む度にiframeでサイズを指定するのも面倒だと思うのCSSを上書き指定した方が楽ですよね。

もう少し簡潔にすると以下のようにするだけで良いですが…
.fluid-width-video-wrapper {
max-width: 〇〇 !important;
}