videos not resized

  • Resolved bhammondCVL

    (@bhammondcvl)


    6 years, 8 months ago

    YouTube videos embedded through the usual “add media from URL” way are not correctly resized, as they are on most WordPress themes (like Twenty Seventeen). Instead they are embedded w/ the attributes width=”1200″ height=”675″.

Viewing 1 replies (of 1 total)
  • Thread Starter bhammondCVL

    (@bhammondcvl)

    There may be easier ways of solving this, but I used a bit of javascript from CSS Tricks in the footer.php file, right after wp_footer();

    <script>
// By Chris Coyier & tweaked by Mathias Bynens
jQuery(function() {
  // Find all YouTube videos
  var $allVideos = jQuery("iframe[src^='https://www.youtube.com']"),
    // The element that is fluid width
    $fluidEl = jQuery(".entry-content");
    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {
      jQuery(this)
        .data('aspectRatio', this.height / this.width)
	// and remove the hard coded width/height
	.removeAttr('height')
	.removeAttr('width');
    });
    // When the window is resized
    // (You'll probably want to debounce this)
    jQuery(window).resize(function() {
       var newWidth = $fluidEl.width();
       // Resize all videos according to their own aspect ratio
       $allVideos.each(function() {
         var $el = jQuery(this);
	   $el
	     .width(newWidth)
	     .height(newWidth * $el.data('aspectRatio'));
       });
   // Kick off one resize to fix all videos on page load
   }).resize();
});
</script>
Viewing 1 replies (of 1 total)
  • The topic ‘videos not resized’ is closed to new replies.

Tags