javascript - VideoJS レスポンシブ 2 つのビデオ

Question

VideoJS で実装された 1 つのページに 2 つのビデオがあります。私はそれらをレスポンシブにしたいと思っており、このトピックに関する次の記事を見つけました: Making Video.js Fluid for RWD

しかし、残念ながら、両方のビデオで動作させることはできません.私が試したものは、常にそのうちの1つだけで動作します..両方で動作させるためにjavascriptコードを変更する方法を知っていますか? 2 つの関数を作成し、すべての変数の名前を変更しようとさえしました。

これが私のサンプルhtmlです：

<div class="videoWrapper">
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"  poster="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video1/spot_01_still.jpg" data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video1/spot_01.flv" type='video/flv'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video1/spot_01.mp4" type='video/mp4'>
    </video>
    <video id="my_video_2" class="video-js vjs-default-skin" controls preload="auto" poster="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video2/spot_02_still.jpg" data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video2/spot_02.flv" type='video/flv'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video2/spot_02.mp4" type='video/mp4'>
    </video>
</div>

CSS:

.videoWrapper video {
max-width: 100% !important;
height: auto !important;
}

#my_video_1, 
#my_video_2 {
    width:100% ;
    height:auto ;
}

そしてjs：

 _V_("my_video_1").ready(function(){
var myPlayer = this;    // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio

function resizeVideoJS(){
  // Get the parent element's actual width
  var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
  // Set width to fill parent element, Set height
  myPlayer.width(width).height( width * aspectRatio );
}

resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});