トップページに動画を入れたいのですが、どうしても思った通りに表示されません。
右側15%の余白があり、左側85%にマスクがかかっていて、そのマスクに合わせて動画を表示させたいです。
全画面なら通常に表示されて、cssで調整してもマスクと動画の比率が違うためか画面サイズによってずれてしまします。
現在コードはこのようになっています。
JavaScript
1 2//ムービー全画面スクリプト(PC用) 3//(1)動画の画角比率を設定します。4:3の場合はここを「4/3」に変更 4var movieRatio = 16/9; 5//(2)画像のリサイズ関数「movieAdjust()」を作成 6function movieAdjust(){ 7 var adjustWidth = $(window).width(); 8 var adjustHeight = $(window).height(); 9 if (adjustHeight > adjustWidth / movieRatio) { 10 adjustWidth = adjustHeight * movieRatio; 11 } 12 $('iframe').css({width:(adjustWidth),height:(adjustWidth/movieRatio)}); 13} 14//(3)画面リサイズ時と画面ロード時に関数movieAdjust()を実行 15 $(window).on('load resize', function(){ 16 movieAdjust(); 17 }); 18
HTML
1<div class="mv"> 2 <div class="layer1"></div> 3 <div class="pc_only" id="video"> 4 <iframe src="https://player.vimeo.com/video/305028287autoplay=1&loop=1&muted=1"> 5</iframe> 6</div> 7</div>
css
1#video iframe{ 2 width: 85%; 3 4 transform: translate(-15%,0%); 5 -ms-transform: translate(-15%,0%); 6}
すみませんわかりにくい説明かもしれないのですが、助けていただけたら嬉しいです( ; ; )
また、参考になるサイトなどでもいいので教えていただけたらありがたいです( ; ; )
説明足りない箇所などありましたらご連絡ください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/21 07:53
2019/01/21 08:03
2019/01/21 08:27
2019/01/21 09:17