html - 如何让我的 jwplayer 视频响应？

Question

我在 Fresca CMS 页面中有一个视频，如下所示

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://content.jwplatform.com/libraries/ovBRFdgO.js"></script>

<div class="container u-spacer-v">
<div class="row">
    <div class="col-lg-12 spacer50">    
        <div class="videoWrapper">
            <div id="media_player"></div>

            <script type="text/javascript">
                var playerInstance;

                $(document).ready(function () {
                    playerInstance = jwplayer("media_player").setup({
                        "playlist": [{
                            "sources": [{
                                "file": "http://content.jwplatform.com/videos/tNGbzoVc-F67Awtrj.mp4",
                            }],
                            "tracks": [{
                                "file": "https://content.jwplatform.com/tracks/YFoEjMQx.vtt",
                                "label": "English",
                                "kind": "captions"
                            }]
                        }],
                        "captions": {
                            "color": "FE94AB",
                            "backgroundColor": "000000",
                            "backgroundOpacity": 100,
                            "fontSize": 8
                        },
                        "autostart": false,
                        "controls": true,
                        "primary": "flash",
                        "aspectratio": "16:9"
                    });

        /*
                    playerInstance.on('ready', function () {
                        $('#status').html("JW7. Provider name: " + playerInstance.getProvider().name);
                    });
        */                 
                    playerInstance.on('captionsList', function (t) {
                       console.log(t)
                    });
                    });
            </script>           
        </div>          
    </div>
</div>      

我想让它响应。我有

    <div class="videoWrapper">
            <div id="media_player"></div>

通常会处理它，但因为 id="media_player"强制播放器具有大小，我无法解决这个问题。请问有人知道如何实现响应吗？

干杯

Answer 1

在你的CSS中添加:

 @media (max-width: 767px) {
.videoWrapper {
width: 100%;
}
#media_player {
width: 100%;
}
#media_player
{
width: 100%;
}
}