Playing HD Youtube in PrettyPhoto
  • When I embed a youtube video in PrettyPhoto using the youtube integration, I cannot add any paramaters beyond width and height. I'd like to be able to have it automatically play in HD, any way of doing this? Perhaps using an iFrame or something? any help would be appreciated, I'm a code newbie.
  • I fixed this with a little hacking of the code.

    If you edit the jquery.prettyPhoto.js file as follows, you should find the same results!

    On line 8, find
    animation_speed: 'fast',
    and add
    hd: false,
    immediately after. Make sure that there is a comma separating the other items from the one you just added.

    You just added a new default parameter to the settings!

    Now, on line 68 find
    if(settings.autoplay)movie+=\"&autoplay=1\";
    Immediately following this statement, add
    (settings.hd)?movie+=\"&hd=1\":movie+=\"&hd=0\";


    What this does is if your settings specify hd: true, then it appends the &hd=1 to the video URL.

    There is one more important change to make at the very beginning of line 68. Find
    http://www.youtube.com/embed/
    and change it to
    http://www.youtube.com/v/
    This switches the player that is called so the HD flag actually WORKS.

    Now, when you initialize pretty photo, just add your hd setting. It will default to false so your users don't have a bad experience on low bandwidth.

    $(\"a[rel^='prettyPhoto']\").prettyPhoto({
    hd: true,
    });
  • When I paste

    (settings.hd)?movie+=\"&hd=1\":movie+=\"&hd=0\";

    Into Dreamweaver I get a code error... I have it after the semi-colon is that right? Is there something I'm missing or a small typo?

    Should there be an if before (settings.hd). I have no idea, any help would be appreciated!
  • Oranges13,

    Love this hack!! The issue I'm having is that whem you change the code on line 68 from /embed/ to /v/ the video no longer plays on the iPad.

    Any thoughts?

    Thanks!!!
  • Love this hack too, but same problem as paul5562 - no longer working on the iPad.
  • I just can't get this to work at all - what am I missing?!
  • Hi there. I've been messing with this for quite some time and I finally got a working solution. Thought I would share it. Revert back to using the "embed" version and instead of using hd=0, use vq=720 or vq=1080. So if you just want ALL of your videos to be in HD...find this line

    movie = 'http://www.youtube.com/embed/'+movie_id;

    Leave it as "embed".

    In the line after, find the element that says "movie+="?rel=1" and change it to

    movie+="?rel=1&vq=720

    This will force all videos to load in HD. The hd=1 doesn't work when you try and embed things but vq does. You could probably add some triggers to enable it if you wanted it on or off. I just wanted it on all the time and that did the trick for me.

    Hope this helps!
  • I built off the code submitted by Oranges13, with modifications, and got it working.

    As he said, I added

    hd: false,

    (I set mine to 'true' - I want all my videos in hd). Then, *before*

    if(settings.autoplay) movie += "&autoplay=1";

    (not sure order matters, but this is how I got mine working), I inserted the following:

    if(settings.hd) {
    movie += "&vq=hd720";
    }

    I currently have it working on www.mortarstone.com under Financial Capacity | Trends Assessment [FCTA].

    I hope this is helpful!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter