Почему сдвигается содержимое iframe на ios?

Question

[Тимофей]

Есть блок .item_right в нем iframe с видео из ютуба

.item_right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2em 1em;
}
iframe {
object-fit: cover;
text-align: center;
-webkit-box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.75);
}

содержимое iframe на айфоне сдвигается влево, подскажите как сделать, чтобы видео по центру располагалось.
Скрин прилагается, спасибо

Answer 1

[Владимир Тимошко]

iframe { text-align: center; }

Так делать нельзя, но можно сделать так:
html:
<span> {iframe} </span>
css:
span{ text-align center:}

Comments

[Тимофей]

Не, не помогло. Обнаружил такой момент, что на айфоне 8 все нормально, на шестом сдвигается
https://gelvardmann.github.io/Nasim/
Сам сайт, если интересно

[Владимир Тимошко]

Попробуй его в тег p засунуть. А в CSS уже пропиши типа p{ text-align: center;}

[Тимофей]

Владимир Тимошко, как вариант, спасибо, но насколько это семантически правильно?

[Владимир Тимошко]

Тимофей, Да, это костыль. Однако он рабочий, и не сложно реализуем. Так что - дерзайте.

Answer 2

[Илья Сандул]

На самом деле все просто. Хоть это и странный баг. в общем у айфонов все как всегда.
Надо просто у iframe не ставить свойство object-fit: cover; оно все ломает.