Customs the size of the Trailer

Hi c4m,

Can’t really know without looking at it, but if you can provide a link to your website I’ll see how we can make it work!

Hi Charlie,

of cause.

Of example https://steelbook-junkies.de/movies/clone-of-jupiter-ascending-3d-amazon-exklusiv/

If you go to the trailers tab the trailer is pretty small.

Best regards,
Alina

Hi Alina,

Ok. Making a video player responsive is a bit tricky as, in the end, it depends on the size of the video itself… You can always override the trailker template by adding a wpmovielibrary/movies/headbox-allocine/tabs/trailer.php file to your theme’s folder with this content. The player will render a player of 640x390px with width limited to the container width to avoid overflow.

Hi Alina,

Making a player responsive is a bit tricky as, in the end, it mostly depends on the videos size… Apart from having a JavaScript calculating the optimum size and dealing with resizes, you can always override the plugin’s template by creating a wpmovielibrary/movies/headbox-allocine/tabs/trailer.php file in your theme’s folder with this content. This will render a 640x380px player limited to the container’s width in smaller screen to avoid overflow. See how it works!

Hi Alina,

Making a player responsive is a bit tricky as, in the end, it mostly depends on the videos size… Apart from having a JavaScript calculating the optimum size and dealing with resizes, you can always override the plugin’s template by creating a wpmovielibrary/movies/headbox-allocine/tabs/trailer.php file in your theme’s folder with this content. This will render a 640x380px player limited to the container’s width in smaller screen to avoid overflow. See how it works!

Hi Charlie,

Thanks for your answer!

I tested the Script and the trailer is now in the size 640x380px but it causes some errors https://screencast.com/t/8eBFKmtcD. Any ideas why?

Also it isn’t mobile response.

Best regards,
Alina

Hi Alina,

Very sorry for making you wait for so long. I’ll investigate this and get back to you quickly!

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="https://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:

Credit CSS-Tricks.com

Thanks a lot Ranydaiz, great found!

I never added JavaScript to the plugin to achieve this because in the end it depends as much on the theme as on the plugin itself, but that piece of code seems to work on all themes I could test it on, so again, good found!

Unfortunately it doesn’t work on my side or i applied it wrong.

I modified the wpmovielibrary-trailers-2.0/views/movies/headbox/tabs/trailer.php file and added a hard coded size to the <iframe>. I am only running a local version for a personal library, so this works for me. Thought it might help someone else.

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 https://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 https://www.youtube.com

Becky