Как Центр встроенного Youtube видео Сохраняя затем по центру и ширина не весь экран

Question

В Youtube HTML, чтобы встроить видео в виде

<iframe width="560" height="315" src="https://www.youtube.com/embed/6Es-eaG4xPg" 
frameborder="0" allowfullscreen></iframe> 

но, конечно, с попыткой сделать страницы мобильными совместимы будет проблема при скрининге менее 560 в ширину.

Так что я изменил мой код

<iframe class="screencast" src="https://www.youtube.com/embed/6Es-eaG4xPg" 
frameborder="0" allowfullscreen></iframe> 

и в таблице стилей были

.screencast { 
    width=560 
    height=315 
} 

идея в том, что я мог бы иметь различные разделы для различных медиа ширины

т.е.

@media screen and (min-width:300px) and (max-width: 499px) { 
    .screencast { 
     width=280 
     height=158 
    } 

Но это не имело никакого эффекта на всех видео теперь всегда отображается на экране слишком мал, и его размер не изменился он, кажется, не обращая внимания на класс CSS

Тогда я нашел этот вопрос

Shrink a YouTube video to responsive width

который требует DIV, чтобы добавить вокруг рамы

например

<div class="videowrapper"> 
<iframe src="https://www.youtube.com/embed/9Cf_xEbUzqE" n allowfullscreen></iframe> 
</div> 

, а затем это добавляется к с сс

.videowrapper { 
     margin:auto 
     float: none; 
     clear: both; 
     position: relative; 
     padding-bottom: 56.25%; 
     padding-top: 25px; 
     height: 0; 
    } 
    .videowrapper iframe { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
    } 

Это работает за исключением того, делает видео взяться за всю ширину, которую я не хочу, я могу изменить ширину

например

.videowrapper iframe { 
     position: absolute; 
     width: 50%; 
     height: 50%; 
    } 

и что работает за исключением того, оленья кожа горизонтальный центр видео

Я пробовал различные вещи, такие как

.videowrapper iframe { 
     position: absolute; 
     left: 25% 
     width: 50%; 
     height: 50%; 
    } 

, но я ничего не делал сосредоточился образом, как я могу решить эту проблему, и почему не мой простой подхода положить класс на IFRAME имеет никакого эффекта.

Answer 1

Вы можете использовать этот код

.video_center iframe{ margin: 0 auto; display:table; }