html 带有HTML5视频的Bootstrap 3 Modal

Posted 2021-05-11

<div class="btn-group">
    <button class="btn btn-link" data-target="#modal-sample" data-toggle="modal" type="button">90 second video tutorial</button>
</div>
<div aria-hidden="true" aria-labelledby="modal-sample-label" class="modal theme-alt modal-center-vertical" id="modal-sample" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-sample-label">Dialog title</h4>
            </div>
            <div class="modal-body">
                <video controls="" id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
                    <source src="/media/autoplay-video.webm" type="video/webm">
                    <source src="/media/autoplay-video.ogg" type="video/ogg">
                    <source src="/media/autoplay-video.mp4" type="video/mp4">
                    Your browser doesn't support HTML5 video tag.
                </video>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-info" data-dismiss="modal" type="button">Cancel</button>
            </div>
        </div>
    </div>
</div>