Interoperatibility with bootstrap

[LunaticMuch]

Hi, does anybody have code or direction to help using video.js with bootstrap (v.4.6) ? Bootstrap provides some default classes for embeds and video but it seems not easy to make them working together with video.js.

I am trying something like (based on from Docks template for Hugo)

<div class="row">
    <div class="col-md embed-responsive-16by9">
        <video id="my-video" class="embed-responsive-item video-js" controls preload="auto" height=261 data-setup="{}">
            <source src="{{ (.Resources.GetMatch "video.mp4" ).Permalink }}" type="video/mp4" />
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a
                web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
        </video>
    </div>
    <div class="col-md-4 mr-auto">
        <h5 class="">{{.Title}}</h5>
        <p class="">{{.Params.Role }}</p>
    </div>
</div>

but I get a bad result.

In video.js I had to force the height otherwise it spans all the page for an HD video. I am looking at video because my video is not a youtube video, so I want to use a player. The CSS gets video after bootstrap.

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

I would say that Video.js is probably not compatible with bootstraps embeds.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.