Максимальная ширина ролика ютуб

Девчушка, попробуйте для класса youtube-embed-wrapper задайте атрибуты max-height и max-width.

Пробовала, режется с боков, а на высоту не влияет

Попробуйте сделать через @media:

@media (min-width: 992px) {

    .youtubevid {

        width: 960px;

        height: 540px; /* 720px */

    }

}



@media (min-width: 767px) and (max-width: 991px) {

    .youtubevid {

        width: 640px;

        height: 360px; /* 480px */

    }

}



@media (min-width: 481px) and (max-width: 766px) {

    .youtubevid {

        width: 480px;

        height: 270px; /* 320px */

    }

}



@media (max-width: 480px) {

    .youtubevid {

        width: 300px;

        height: 169px; /* 225px */

    }

}

Потом присваивайте iframe класс youtubevid (или как Вы его там назовёте).

P.S. Мопед не мой.

Пробовала медиа к youtube-embed-wrapper писать и к моему диву, в который оборачивала. Сейчас к ифрейму по вашему совету попробовала, не реагирует (

---------- Добавлено 02.08.2017 в 17:33 ----------

Если прописываешь !important то видео режется, но под ним пустота

<style type="text/css">

   img,embed{max-width:100%;margin:0;padding:0;border:0}

   embed{margin:3ex 0;width:600px;height:360px}



 @media screen and (max-width:800px){

    embed{margin:1.2ex 0}

  }



 @media screen and (max-width:500px){

    embed{margin:0.8ex 0}

  }

</style>





<object>

  <param value="http://www.youtube.com/v/X4uvv002nMc&amp;hl=ru_RU&amp;feature=player_embedded&amp;version=3" name="movie">

  <param value="true" name="allowFullScreen"><param value="always" name="allowScriptAccess">

  <embed allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/X4uvv002nMc&amp;hl=ru_RU&amp;feature=player_embedded&amp;version=3">

</object>

А если у юзверя пикселей/дюйм в 3 раза больше, чем у вас?

богоносец, спасибо, покрутила так-сяк и сделала, как хотела с помощью этого кода.

Если правильно поняла, то в этом и загвоздка была. 100%е видео на адаптивном сайте ведь растягивается не только в ширину, но и в высоту, и на большом экране оно вылазит вертикально аж за границы браузера. Кому надо при просмотре развернет.

Еще бы по центру как то выставить сеё, никак не получилось (

<div class="content" align="center">

  <div class="...">

    <h1></h1>

    <img alt="" src="345.jpg">

    <img alt="" src="578.jpg">

    <noscript><div style="color:#FA0">Отключен <span style="color:#00D">JavaScript</span></div></noscript>

    <object>

      <param value="http://www.youtube.com/v/R8KeLT28eGw&amp;hl=ru_RU&amp;feature=player_embedded&amp;version=3" name="movie">

      <param value="true" name="allowFullScreen"><param value="always" name="allowScriptAccess">

      <embed allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/R8KeLT28eGw&amp;hl=ru_RU&amp;feature=player_embedded&amp;version=3">

    </object>

  </div>

</div>

Но в CSS тоже как-то можно. Но никто не знает, почему именно CSS... не все поддерживают религиозный бизнес W3C