Размер модального набора видео в Blazor - PullRequest
Новая
       58

Размер модального набора видео в Blazor

0 голосов
/ 27 мая 2020

Я пытаюсь создать модальное видео без ограничений, занимающее 80% экрана.

Пока мне удалось создать модальное окно, но я не знаю, как установить размер модального окна, чтобы он занимал 80% экранного пространства. Кроме того, я не знаю, как избавиться от пробелов. По сути, я хочу, чтобы видео занимало все доступное пространство в модальном окне.

Все обучающие программы, которые я нашел в Интернете, описывают модальные окна с iframe, но мне нужен тег видео HTML5 для функции субтитров.

Теперь модальное окно: enter image description here

Стиль HTML и CSS находится в приведенном ниже коде. 

 <button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-target="#myModal">
            Config
        </button>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">


                    <div class="modal-body">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <!-- 16:9 aspect ratio -->
                        <div class="embed-responsive embed-responsive-16by9">
                            <video  autoplay muted id="video" src="/videos/rez/configurare.mp4" controls width="1000" height="1000">
                                <track kind="captions" src="/videos/rez/configurare.txt" default>
                            </video>
                        </div>


                    </div>

                </div>
            </div>
        </div>

       <style>
           body {
               margin: 2rem;
           }

           .modal-dialog {
               max-width: 800px;
               margin: 30px auto;
           }



           .modal-body {
               position: relative;
               padding: 0px;
           }

           .close {
               position: absolute;
               right: -30px;
               top: 0;
               z-index: 999;
               font-size: 2rem;
               font-weight: normal;
               color: #fff;
               opacity: 1;
           }
       </style>
...