Krimp een YouTube-video naar de responsieve breedte

Ik heb een YouTube-video ingebed op onze website en wanneer ik het scherm krimpt naar tablet of telefoonformaten stopt het met krimpen op ongeveer 560px in de breedte. Is deze standaard voor YouTube-video’s of is er iets dat ik aan de code kan toevoegen om het kleiner te maken?

Antwoord 1, Autoriteit 100%

U kunt YouTube-video’s reageren met CSS. Wikkel de iframe in een div met de klasse van “videowapper” en pas de volgende stijlen toe:

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

De DIV van VideowrowPer moet in een responsief element zijn. De opvulling op de .videowrapper is noodzakelijk om de video te laten instorten. Mogelijk moet u de nummers aanpassen, afhankelijk van uw lay-out.

Antwoord 2, Autoriteit 10%

Als u bootstrap gebruikt, kunt u ook een responsieve insluiten gebruiken. Dit wordt volledig automatiseerd om de video (en) responsief te maken.

http://getbootstrap.com/componenten/#Responsive-med

Er is een aantal voorbeeldcode hieronder.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Antwoord 3, Autoriteit 3%

Verfijnde JavaScript-oplossing voor YouTube en Vimeo met jQuery.

// -- After the document is ready
$(function() {
  // Find all YouTube and Vimeo videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });
  // When the window is resized
  $(window).resize(function() {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
      var $el = $(this);
      // Get parent width of this video
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });
  // Kick off one resize to fix all videos on page load
  }).resize();
});

Eenvoudig te gebruiken met alleen insluiten:

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

of met reagerend stijlkader zoals bootstrap.

<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

• is afhankelijk van de breedte en hoogte van iframe om de beeldverhouding

te behouden

• kan een beeldverhouding gebruiken voor breedte en hoogte (width="16" height="9")
• wacht totdat het document klaar is voordat u het formaat van
• gebruikt jQuery substring *=selector in plaats van start van string ^=
• krijgt referentiebreedte van video-iframe-ouder in plaats van vooraf gedefinieerd element
• JavaScript-oplossing
• NO CSS
• Geen wrapper nodig

Dankzij @Dampas voor startpunt.
https://stackoverflow.com/a/33354009/1011746

Antwoord 4, Autoriteit 3%

Ik heb de CSS in het geaccepteerde antwoord hier gebruikt voor mijn responsieve YouTube-video’s – werkte prima totdat YouTube hun systeem begin augustus 2015 bijwerkte. De video’s op YouTube hebben dezelfde afmetingen, maar om welke reden dan ook de CSS in de geaccepteerd antwoord nu brievenbussen al onze video’s. Zwarte banden aan de boven- en onderkant.

Ik heb rondgekeken met de maten en besloten om de bovenste opvulling te verwijderen en de onderste opvulling te veranderen in 56.45%. Ziet er goed uit.

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

Antwoord 5

@magi182’s oplossing is solide, maar mist de mogelijkheid om een ​​maximale breedte in te stellen. Ik denk dat een maximale breedte van 640 px nodig is, omdat de YouTube-miniatuur er anders korrelig uitziet.

Mijn oplossing met twee wrappers werkt als een tierelier voor mij:

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Ik heb de padding-bottom in de binnenverpakking ook ingesteld op 50%, omdat bij @magi182’s 56% een zwarte balk bovenaan en onderaan verscheen.

Antwoord 6

Dit is een oude thread, maar ik heb een nieuw antwoord gevonden op https:// css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Het probleem met de vorige oplossing is dat je een speciale div rond videocode nodig hebt, wat niet geschikt is voor de meeste toepassingen. Dus hier is een JavaScript-oplossing zonder speciale div.

// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
    $(this)
    .data('aspectRatio', this.height / this.width)
    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
    var newWidth = $fluidEl.width();
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });
// Kick off one resize to fix all videos on page load
}).resize();
// END RESIZE VIDEOS

Antwoord 7

Moderne eenvoudige css-oplossing

De nieuwe aspect-ratiois de moderne oplossing voor dit probleem.

aspect-ratio: 16 / 9;

Dat is alles wat je nodig hebt om automatisch een div, afbeelding en iframe-formaat te maken. Voorbeelden.

Het heeft goede ondersteuning, maar is nog niet in Safari (wordt voor aankomende iOS15 ) – dus voorlopig moet je nog een fallback gebruiken. U kunt dat bereiken met de functie @supports

.element 
{
   aspect-ratio: 16 / 9;
   @supports not (aspect-ratio: 16 / 9) 
   {
       // take your pick from the other solutions on this page
   }
 }

Ervan uitgaande dat uw ontwikkelbrowser deze eigenschap ondersteunt, moet u testen zonder deze eigenschap door zowel aspect-ratioals @supportste becommentariëren.

Antwoord 8

Met credits voor vorig antwoord https://stackoverflow.com/a/36549068/7149454

BoosTRAP Compatibel, adust uw containerbreedte (300px in dit voorbeeld) en u bent goed om te gaan:

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>

Antwoord 9

Oké, ziet eruit als grote oplossingen.

Waarom niet width: 100%;rechtstreeks in uw iframe. 😉

Dus uw code ziet er iets uit als <iframe style="width: 100%;" ...></iframe>

Probeer dit het zal werken zoals het in mijn geval werkte.

Genieten! 🙂

Antwoord 10

Ik maak dit met eenvoudige CSS als volgt

HTML-code

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

CSS-code

<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}