ブートストラップを使用して開発されたレスポンシブ レイアウト Web サイト用のビデオ プレーヤーが必要です。つまり、画面のサイズを変更したり、さまざまなサイズの画面でページを表示したりすると、プレーヤーは自動的に画面に収まるはずです。
jwplayer と flowplayer を試してみましたが、うまくいきませんでした。
注:プレーヤーはYouTubeビデオを再生できる必要があります....
jwplayer/flowplayerをレスポンシブにする方法はありますか?
ブートストラップを使用して開発されたレスポンシブ レイアウト Web サイト用のビデオ プレーヤーが必要です。つまり、画面のサイズを変更したり、さまざまなサイズの画面でページを表示したりすると、プレーヤーは自動的に画面に収まるはずです。
jwplayer と flowplayer を試してみましたが、うまくいきませんでした。
注:プレーヤーはYouTubeビデオを再生できる必要があります....
jwplayer/flowplayerをレスポンシブにする方法はありますか?
ルカの答えのより良いバージョン:
$(window).resize(function() {
var $width = $("#holder").width();
var $height = $width/1.5;
jwplayer().resize($width,$height);
});
JW Player APIのサイズ変更機能を使用します。
http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player
別の解決策:
レスポンシブ デザイン サポートのドキュメントを確認してください: http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
image: "/uploads/myPoster.jpg",
width: "100%",
aspectratio: "12:5" // Set your image ratio here
});
</script>
シンプルなcssスタイルで変更できます
/* Video small screen */
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
サイズ変更にjQueryを使用しています。#holder
ムービーが配置されるdivです(#videocontainer
)。
構造:
<div id="holder">
<div id="videocontainer"></div>
</div>
サイズがかかり#holder
、に渡します#videocontainer
。それはie9、ie8、..で動作します
$(window).resize(function() {
var $width = $("#holder").width();
var $height = $width/1.5;
jwplayer("videocontainer").setup({
flashplayer: "jwplayer/player.swf",
file: "###.mp4",
width: $width,
height: $height,
image: "###.jpg"
});
});
それが役に立てば幸い!
最も簡単な方法は、javascript を使用することです
function sizing() {
$('#player').css('width', $('#container').outerWidth());
$('#player').css('height',$('#player').outerWidth() / 1.33);
}
$(document).ready(sizing);
$(window).resize(sizing);
jquery ライブラリをインクルードし、アスペクト比を変更することを忘れないでください (1.33 は 4:3 用、1.77 は 16:9 用です)。
これは私にとってはうまくいきます JWプレーヤーはここに行きます
<script type="text/javascript">
if($( window ).width() <= 400){
pl_width = 300;
pl_heith = 150;
}else if($( window ).width() <= 600){
pl_width = 500;
pl_heith = 250;
}else{
pl_width = 700;
pl_heith = 350;
}
//alert(pl_width);
jwplayer("video_top").setup({
flashplayer: "<?php echo $player_path; ?>",
file: "<?php echo $your_file; ?>",
controlbar: "bottom",
height:pl_heith,
width:pl_width
});
サイトで YouTube 動画を使用し、FitVid.Jsプラグインを使用してサイトをレスポンシブにすることができます。