Как мне сделать мой видео jwplayer отзывчивым? - PullRequest
Новая
       8

Как мне сделать мой видео jwplayer отзывчивым?

0 голосов
/ 12 июня 2018

У меня есть видео на странице CMS Fresca, как показано ниже. 

<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" заставляет игрока иметь размер, я не могу обойти это.Кто-нибудь есть идеи о том, как добиться отзывчивости, пожалуйста?

ура

1 Ответ

0 голосов
/ 12 июня 2018

В вашем CSS добавить это: 

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