WordPress ツール・ソフトウェア

WordPress のプラグイン「Flv Embed」のレイアウトを変更する

「Flv Embed」を使ってビデオを埋め込むと、プレイヤーの上下に余白ができてしまった。。(以下の図の白い帯部分)

image

WordPress のビデオ埋め込み用のプラグイン 「Flv Embed 」を使って埋め込まれたソースを見てみると以下のようになっている。

<p id="player1" style="display:none"><a href="http://www.macromedia.com/go/getflashplayer">Get the latest Flash Player</a> to see this player.</p>
<noscript><p>[Javascript required to view Flash movie, please turn it on and refresh this page]</p></noscript>

<script type="text/javascript">
    document.getElementById("player1").style.display = "";
    var s1 = new SWFObject("http://localhost/wordpress/wp-content/plugins/flv-embed/flvplayer.swf","player1","300","190","7");
    s1.addParam("wmode","transparent");
    s1.addParam("allowscriptaccess","always");
    s1.addParam("allowfullscreen","true");
  ・・・・・・・・・・・
  ・・・・・・・
    s1.write("player1");
</script>

上記の “player1” という属性がスタイルを決めているようだ。
実際 readme .txtを見ると、ビデオを中心寄せしたい場合について以下のような記述がある。

= How can I align the video in the middle? =

Put the following code into your theme’s stylesheet:

`#player1, #player2, #player3 {text-align: center;}`

(for easy way of doing this, see [MyCSS](http://www.channel-ai.com/blog/plugins/mycss/) plugin)

なので、上記の表記を参考にして、自分のテーマの css に以下のような記述を追加してみたら、上手くビデオ周りの余白が消えてくれた。

/* flv embed のビデオの周りにできる空白を無くす */

#player1, #player2, #player3 {margin : 0;}

-WordPress, ツール・ソフトウェア

Copyright© エンジニアの何でもメモ帳 , 2020 All Rights Reserved.