Ranydaiz

Hey All,

I figured out how to implement the jQuery Script so I hope this helps everyone out. Beyond this, I can’t help.

Note: This script will affect all iframe videos with a URL of youtu.be or http://www.youtube.com across your whole site.

Note 2: Because this script overwrites video width and height, the video will take up the space of the containing element it’s located in. You can control it’s size via CSS.

You need to modify wpmovielibrary-trailers-2.0/views/movies/headbox/tabs/trailer.php file and look for this line:

<iframe src="<?php echo $trailer ?>" frameborder="0"></iframe>

Add a width and height…any will do because the jQuery Script will overwrite it. Without a width/height, your video will be wide and short. It should look something like this:

<iframe width="560" height="315" src="<?php echo $trailer ?>" frameborder="0"></iframe>

This is also the same line you want to add youtube’s code for turning on/off suggested videos, video controls, video title, etc. Go to youtube and start a video, click the embed tab and select the options you do or don’t want. Take note of where the quote mark is after the ? mark in youtube’s iframe embed line… see example

<iframe width="560" height="315" src="https://www.youtube.com/embed/lP-sUUUfamw?showinfo=0" frameborder="0" allowfullscreen></iframe>

Copy from the ? mark all the way through and including the iframe closing tag. Delete everything ” frameborder=”0″></iframe> in the trailer.php file and paste your youtube code into it. The line in trailer.php should look something like this once you’re done…

<iframe width="560" height="315" src="<?php echo $trailer ?>?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Save your file then open notepad. Paste the code below into it. Save and name your file my-js.js. Put this file in the root of your theme folder.

jQuery(document).ready(function($) {
    // Find all YouTube videos
var $allVideos = $("iframe[src^='//youtu.be'], iframe[src^='//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();
});

Add the following lines into your theme’s function.php file.

//Add Responsive Youtube

function add_responsive_youtube() {
    wp_enqueue_script( "my-js", get_template_directory_uri() . '/my-js.js', array( 'jquery' )); 

}
add_action('wp_enqueue_scripts', 'add_responsive_youtube');

And that’s it. You’re done. You now have site-wide responsive youtube videos as long as you are using iframe embedded videos with a URL of youtu.be or http://www.youtube.com

Becky

Charlie,

I’ve read how busy you are lately and I found a CSS method and a jquery method for resizing the iframe youtube videos. I know the jquery works well and the other is untested. Unfortunately, the one I know that works well, I don’t know how to incorporate into your plugin as I used a different plugin to tie it together.

CSS Method:

HTML:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

OR

JQuery Method:

// Find all YouTube videos
var $allVideos = $("iframe[src^='//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();

Credit for these methods go to: