Как я могу выровнять встроенное видео YouTube в центре в начальной загрузке

Я пытаюсь выровнять встроенное видео YouTube по центру страницы на странице начальной загрузки. Размер видео всегда одинаков.

Мой HTML выглядит очень просто:

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

Я пробовал разные решения от stackoverflow (который касался только центрирования div, а не видео), и лучшее, что я смог придумать, это эту скрипку.

Я уже пробовал решение1, решение2, решение3, но безрезультатно. Другое частично успешное решение заключалось в использовании:

width: 50%;
margin: 0 auto;

Он хорошо работал на настольном компьютере, но не работал на iPad или телефоне (видео частично выходило за пределы экрана). Как правильно центрировать видео на рабочем столе/планшете/телефоне?

Ответ 1

Важно отметить / "Bootstrap" - это просто куча правил CSS

скрипка

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>

CSS

/* key stuff */
.your-centered-div {
    width: 560px; /* you have to have a size or this method doesn't work */
    height: 315px; /* think about making these max-width instead - might give you some more responsiveness */

    position: absolute; /* positions out of the flow, but according to the nearest parent */
    top: 0; right: 0; /* confuse it i guess */
    bottom: 0; left: 0;
    margin: auto; /* make em equal */
}

Полностью работает jsFiddle здесь.

ИЗМЕНИТЬ

В основном я использую это в наши дни:

прямой CSS

.centered-thing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

, если вы используете стилус /mixins (вы должны... это лучше всего)

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

Таким образом... вам не нужно знать размер элемента - и перевод основан на его размере - Итак, -50% от себя. Ухоженная.

Ответ 2

Youtube использует iframe. Вы можете просто установить его на:

iframe {
   display: block;
   margin: 0 auto;
}

Ответ 3

<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>

Ответ 4

Вам не нужно вставлять <iframe> в родительский div. Вы можете настроить таргетинг именно на youtube iframe с помощью CSS/3:

iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
   display: block;
   margin: 0 auto;
}

Ответ 5

Я установил максимальную ширину для моего видео на 100%. На телефонах видео автоматически соответствует ширине экрана. Поскольку встроенное видео имеет ширину всего 560 пикселей, я просто добавил 10% левого поля в iframe и вернул "0" для поля для мобильного CSS (чтобы разрешить полное представление ширины). Я не хотел беспокоиться о размещении div вокруг каждого видео...

Рабочий стол CSS:

iframe {
		margin-left: 10%;
	}

Ответ 6

Использование Bootstrap, встроенного в класс .center-block, который устанавливает маржи слева и справа на auto:

<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>

Или используя встроенный класс .text-center, который устанавливает text-align: center:

<div class="text-center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

Ответ 7

<div>
    <iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> . 
    </iframe>
</div>

<script>
    function myFunction() {
        var wscreen = window.innerWidth;
        var hscreen = window.innerHeight;

        document.getElementById("myFrame").width = wscreen ;
        document.getElementById("myFrame").height = hscreen ;
    }

    myFunction();

    window.addEventListener('resize', function(){ myFunction(); });
</script>

это работает на Vimeo добавление идентификатора myFrame в iframe

Ответ 8

сделайте iframe с align = "middle" и поместите его в абзац с style = "text-aling: center":

<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>

Ответ 9

Для полностью адаптивного видео в формате IFramed на YouTube попробуйте следующее:

<div class="blogwidevideo">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.blogwidevideo {    
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;    
}

.blogwidevideo iframe {   
    left:10%; //centers for the 80% width - not needed if width is 100%
    top:0;
    height:80%; //change to 100% if going full width
    width:80%;
    position:absolute;
}

Ответ 10

<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>

Кажется, это работает, это все, о чем вы просили? Наверное, вы могли бы заняться более активными маршрутами, но это казалось достаточно простым.