youtube iframe測試

by ken tsai

HTML

<iframe width="400" height="400" src="https://www.youtube.com/embed/ixl9yeQqudg?iv_load_policy=3&modestbranding=0&autoplay=1&showinfo=0&wmode=transparent&branding=0&autohide=0&hd=1&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


<iframe src="https://player.vimeo.com/video/190096889?autoplay=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/190096889">Field of Vision - The Disclosure President</a> from <a href="https://vimeo.com/fieldofvision">Field Of Vision</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

JavaScript

// -- 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();
});