Изменение размера встроенного видео при изменении размера окна с сохранением соотношения сторон - PullRequest
Новая
       29

Изменение размера встроенного видео при изменении размера окна с сохранением соотношения сторон

0 голосов
/ 30 января 2020

Я пытаюсь изменить размер встроенных видео при сохранении соотношения сторон. (в данном случае это 16: 9)

Я нашел решение на этом сайте: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Как вы можете видеть, видео (то, что я m using is vimeo) изменяет размер, когда пользователь изменяет размер окна. Однако я не мог заставить его работать с этим Javascript кодом. Я знаком с HTML и CSS, но я ладья ie с Javascript.

Вот мой HTML, я бы обычно использовал внешний CSS, но здесь Я сделал копию того, что я пытаюсь сделать, и упростил это: 

<!DOCTYPE html>
<html lang="EN" style="height: 100%;">
    <head>
        <meta name="viewport" content="width: device-width; initial-size: 1.0;">

        <style>
            body{
                background-color: darkolivegreen;
            }
            table{
                width: max-content;
                height: max-content;
                position: absolute;
            }
            iframe{
                width: 450px;
                height: 253.13px;
            }
            #table1{
                left: 4.2vw;
                top: 33vh;
            }
            #table2{
                right: 4.2vw;
                top: 33vh;
            }
        </style>

    </head>
    <body>
        <table id="table1">
            <tr>
                <td>
                    <iframe src="https://player.vimeo.com/video/385145267?color=ffffff" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </td>
            </tr>
        </table>
        <table id="table2">
            <tr>
                <td>
                    <iframe src="https://player.vimeo.com/video/385145267?color=ffffff" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </td>
            </tr>        
        </table>
    </body>

</html>

1 Ответ

0 голосов
/ 30 января 2020

В стиле у меня было бы что-то вроде этого: 

iframe{
width: <multiple of 16>vh
height: <multiple of 9>vh
}

или вы могли бы заменить vh на vw, vmin, vmax для различных эффектов

em Относительно font-size элемента (2em означает 2-кратный размер текущего шрифта)
ex Относительно x-высоты текущего шрифта (редко используется)
ch Относительно ширины «0» (ноль) ) rem Относительно размера шрифта элемента root
vw Относительно 1% ширины области просмотра *
vh Относительно 1% высоты области просмотра *
vmin Относительно 1 % * меньшего размера окна просмотра vmax Относительно 1% * большего размера окна просмотра
% По отношению к родительскому элементу

через https://www.w3schools.com/

...