web-dev-qa-db-ja.com

カスタムフィールドからの取得方法、コンテナのサイズとレスポンシブに応じる

カスタムフィールド/メタボックスを追加するためにMagic Fields 2を使用しています。

カスタムフィールドの1つは、VimeoまたはYouTubeのビデオURLを表示するためのものです。

次の コードは、ビデオのURL ：を表しています。

<?php if (!((get_post_meta($post->ID, 'video_url', TRUE))=='')) {
    echo wp_oembed_get( get_post_meta($post->ID, "video_url", true) );
}?>

ビデオのサイズを変更するために、<div class="video">の内側にコードを追加し、CSS - .video iframe {width:500px;height:312px}を使用してサイズを変更しました。

問題は、この方法は反応しないことです。

私は.video iframe {width:95%;height:95%}も試しました。この出力は以下のようになります -

enter image description here

Fluid Video Embedsプラグイン は通常のWordPressメソッドとショートコードを通してoEmbedsの仕事をしているようですが、カスタムフィールドを使うのではありません。

custom-fieldresponsiveoembed
3
Travis Pflanz

プラグイン FitVids for WordPress を使用して、 fitvids.js でタスクを完了しました。

Chris Coyierがスクリーンキャスト FitVids.jsをWordPressに統合 （ YouTube上 ）でWordPressとの統合について説明しています。

私のカスタムフィールド名はvideo_urlです。私は自分のテンプレートで次のコードを使用しました。

<?php if (!((get_post_meta($post->ID, 'video_url', TRUE))=='')) {
    echo wp_oembed_get( get_post_meta($post->ID, "video_url", true) );
}?>

WordPressのFitVidsの設定で、ビデオの最大幅を表す含まれているdivクラスまたはIDを単に入力します。

enter image description here

それを必要とする人のために、WordPressのスクリーンキャストにFitVids.jsを統合することはjQueryと適切なCSSセレクタのためにテーマをチェックする方法を示します。

2
Travis Pflanz