Jak mogę przeskalować odtwarzacz YouTube do szerokości strony, ale także zachować proporcje?

Co uważam za najlepsze rozwiązanie CSS.

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

Demo http://jsfiddle.net/JBhp2/

Ta wtyczka jQuery została Co rund późno, nazywa się FitVids i robi dokładnie to, czego potrzebujesz, zmienia rozmiar wideo na podstawie rozmiaru przeglądarki przy zachowaniu proporcji.

Http://fitvidsjs.com/

Całkiem proste z javascript.

jQuery(function() {
    function setAspectRatio() {
      jQuery('iframe').each(function() {
        jQuery(this).css('height', jQuery(this).width() * 9/16);
      });
    }

    setAspectRatio();   
    jQuery(window).resize(setAspectRatio);
});

Sztuczka, aby zrobić autoresize wideo youtube jest zrobić szerokość iframe 100% i umieścić go w div z "padding-bottom" równe proporcji w procentach. Np.

Ale problem w tym - będziesz miał już wiele stron z osadzonymi filmami YoutTube. Oto wtyczka jquery, która zeskanuje wszystkie filmy na stronie i sprawi, że będą one automatycznie zmieniane, zmieniając kod iframe tak, jak powyżej. Oznacza to, że nie musisz zmieniać żadnego kodu. Include the javascript a wszystkie Twoje filmy z YouTube stają się autoresizing. https://skipser.googlecode.com/files/youtube-autoresizer.js

Stare pytanie, ale myślę, że znaczniki @media CSS 3 byłyby pomocne w tym przypadku.

CSS:

@media only screen and (min-width: 769px) {
    .yVid {
        width: 640px;
        height: 360px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .yVid {
        width: 560px;
        height: 315px;
        margin: 0 auto;
    }
}

HTML:

<div class="yVid">
    <iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>

To w zasadzie dodaje punkt przerwania na 768px, gdzie wideo zmienia rozmiar. Możesz również dodać punkty przerwania w 992 i 1280, aby uzyskać jeszcze bardziej powtarzalny rozmiar wideo. (liczby oparte na standardowych rozmiarach Bootstrap).

Możesz użyć dwóch klas, które skalowałyby rozmiar wideo w oparciu o rozmiar div owijania. Rozważ ten przykład:

<div class="content-wrapper">
    <div class="iframe-wrapper res-16by9">   
        <iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Teraz spójrz na css.

.content-wrapper{
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

.iframe-wrapper{
  width: 100%;
  position: relative;
}

.res-4by3{
  padding-bottom: 75%;
}

.res-16by9{
  padding-bottom: 56.25%;
}

.iframe-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Zauważ, że będziesz musiał zawinąć ramkę iframe w div, którego szerokość jest ustawiona na 100%, a pozycja jest ustawiona na relative. Musisz również dodać dolną wyściółkę do owijarki iframe. To wypełnienie określi wysokość wideo. Polecam utworzyć dwie klasy, które będą reprezentować współczynnik obrazu.

Jest dość łatwo obliczyć prawą dolną wyściółkę dla owijarek, które reprezentują pewną rozdzielczość. Np. dla res 4 przez 3 i 16 przez 9 mielibyśmy dolny padding równy:

[4/3]

100 / 4 * 3 = 75%;

[16/9]

100 / 16 * 9 = 56.25%

Następnie Ustaw ramkę iframe jako absolutną i przesuń ją do lewego górnego rogu okładki div. Również meke upewnij się, aby ustawić szerokość i wysokość iframe 100%. Teraz musisz zrobić jeszcze jedną rzecz. Jesteś skończony.

Dodaj klasę, która pasuje do odpowiedniej rozdzielczości dla Ciebie. Skaluje odpowiednio szerokość i wysokość obrazu, zachowując odpowiednie proporcje.

Powyższy przykład działa dla dowolnego iframe. Oznacza to, że można go również używać do Google maps iframe.

Możesz użyć style="max-width: %87; max-height: %87;"

Oprócz Darwina i Todda następujące rozwiązanie będzie

1. unikaj dolnego marginesu
2. maksymalizacja szerokości dla dużych ekranów
3. zminimalizuj wysokość w widoku mobilnym
4. zachowaj stały rozmiar dla przeglądarek zgodnych z @ media none

HTML:

<div class="video_player">
  <div class="auto-resizable-iframe">
    <div>
      <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
    </div>
  </div>
</div>

CSS:

.videoplayer{

    text-align: center;
    vertical-align: middle;

    background-color:#000000;

    margin: 0;
    padding: 0;

    width: 100%;
    height:420px;

    overflow:hidden;

    top: 0;
    bottom: 0;

}

.auto-resizable-iframe {
    width:100%;
    max-width:100%;
    margin: 0px auto;
}

.auto-resizable-iframe > div {
    position: relative;
    padding-bottom:420px;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


//full screen
@media (min-width:0px) {

    .videoplayer{
        height:100%;
    }

    .auto-resizable-iframe > div {
        padding-bottom:100%;
    }           

}

//mobile/pad view
@media (min-width:600px) {

    .videoplayer{
        height:420px;
    }

    .auto-resizable-iframe > div {
        padding-bottom:420px;
    }       

}       

To mi się udało. Jest to nieco zmodyfikowany kod z generatora kodu YouTube Embed .

CSS:

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    }
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

HTML:

<div class="video-container">
    <iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>

Istnieje kilka sugestii na liście odpowiedzi, aby użyć js do modyfikacji struktury generowanego iframe. Myślę, że istnieje z tym ryzyko, ponieważ gdy zawijasz ramkę iframe wewnątrz innych elementów, możliwe jest, że api YouTube straci "połączenie" z ramką iframe(zwłaszcza jeśli przekażesz element jako węzeł zamiast używać określonego id jak ja). To raczej obejść to faktycznie, użyj javascript, aby zmodyfikować zawartość, zanim faktycznie uruchomić youtube gracz.

Fragment z mojego kodu:

/**
 * Given the player container, we will generate a new structure like this
 *
 * <div class="this-is-the-container">
 *      <div class="video-player">
 *          <div class="auto-resizable-iframe">
 *              <div>
 *                  <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
 *              </div>
 *          </div>
 *      </div>
 * </div>
 *
 * @return {Node} the real player node deep inside
 */
YouTube.renderResizable = function (playerContainer) {
    // clean up the content of player container
    playerContainer.textContent = '';

    var playerDiv = document.createElement('div');
    playerDiv.setAttribute('class', 'video-player');

    playerContainer.appendChild(playerDiv);

    // add the auto-resizable-frame-div
    var resizeableDiv = document.createElement('div');
    resizeableDiv.setAttribute('class', 'auto-resizable-iframe');

    playerDiv.appendChild(resizeableDiv);

    // create the empty div
    var div = document.createElement('div');
    resizeableDiv.appendChild(div);

    // create the real player
    var player = document.createElement('div');
    div.appendChild(player);

    return player;
};

Dodaj kod JavaScript, aby dać każdemu YouTube iFrame klasę:

$('iframe[src*="youtube"]').addClass('youtube')

Następnie w zapytaniach o Media Użyj klasy you tube, aby ustawić inny rozmiar.

.youtube {
   /* Do stuff here */
}

Łatwiejsze i zoptymalizowane do CMS niż sposób ręczny.