YouTube Lightbox Syntax Please

Hi repko,

You can append ?rel=0&autoplay=1 to the URL to make it start on open and remove related videos. But the automatic proportional part will not be possible, I’m afraid…

Unless someone else has thought of a way to detect Youtube video dimensions on the fly.

Hello RavanH,

Thanks for the reply.
Your plugin works perfect for images. Images are given dimensions. Youtube can be also given starting dimensions/aspect ratio. Other thing is, can’t it be done with % in the code, like 90% or 95%, just guessing here…

If it can’t be done with your plugin, Is there other plugin that works fine on mobile? As it is so frustrating that I am looking for few years for plugin that I can chose image, and when you click opens YouTube in a light box. I even bought several plugins and for some reason they all clash with my website, or just don’t work properly for some other reason…

Best regards
Srdjan

Using percentages for Youtube frames is theoretically possible but let’s say you give it a 90% width then the height will not adapt to the individual video ratio. Same as with a fixed size… If the video has a different width to height ratio than the size of the frame, you will see the black margins on the top&bottom or left&right sides of the video.

But what you can do is this:
1. Activate the option “Include the jQuery Metadata extension…” (find it under FabcyBox/Links on Settings > Media)
2. Edit each individual Youtube link in the HTML view tab so that it looks like this example:

<a href="https://www.youtube.com/watch?..." class="fancybox-youtube {width:600,height:400}"><img ... /></a>

Note the {width:600,height:400} in that class attribute. These parameters can be used to define different sizes for individual media.

Hope you can use this method and let me know if you have issues implementing it.

Hello RavanH,

Thanks for the reply. Actually that did not make any difference, unfortunately. I am not sure why, but autoplay is not working on my mobile. Will Iframes approach work better. Unfortunately I will need Syntax, as I don’t know how to setup the syntax for the picture, that hold popup information. Once I did it with text, but I need picture to be clicked.
Thanks in advance ??

Hi repko, you might find that iframe mode gives you more control when using url parameters but it’s a little more complicated…

Start with the FancyBox settings on Settings > Media. Activate the iFame feature and deactivate the Youtube feature (or at least the Autodetect option in the Youtube settings).

Now, you have to find the iframe “src” url. Go to the movies Youtube page and click on Sharing. Choose the embed method and see that the proposed code involve an iframe. This iframe has a src="..." attribute. You need to copy the URL that is in that attribute.

Then go to edit your WordPress page/post and insert an image via the Add Media button. Either select an existing image or upload a new one. Choose the image size that you would like to show on the page and set the option “Link to: Custom URL”. Paste the URL that you found in the iframe embed code earlier in the Link field and append a question mark plus any parameters like rel=0 seperated by a & mark. Hit Insert button.

Then click on the newly inserted image in the post/page and click on the Edit icon that appears top-left of that image. In the edit dialog, switch to the Advanced Settings tab and find the field “CSS Class”. Add “fancybox-iframe”, seperated by a space from the existing class names. Hit Update.

Save your post/page and test the front end.

One extra tip: if you want to use the default Youtube movie image, then instead of uploading an image before inserting it on your page, choose “Insert from URL” (on the left) and paste a URL that you can find by using one these formats:

https://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/default.jpg
https://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/mqdefault.jpg
https://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/hqdefault.jpg

Replace the “UNIQUE-MOVIE-ID” with the movie ID code that also appears in the iframe src URL.

Then hit Insert button and open the image for editing as described before. Now you can define the “Link to” URL and add the CSS Class.

Hello RavanH,

Thanks for your input.
I want to have my custom image, which is the reason I am using this plugin in the first place.
This is what I have done:
1. WordPress/settings/fencyBox YouTube Untick, iFrames Tick. Links none, none, “include metadata… “unticked.Save changes
2. On Page:
Add media, uploaded image. Hover the image, and clicked edit Image:
Edit image: under Link URL: https://www.youtube.com/v/MOiyD26cJ2A?rel=0&autoplay=1
Advanced settings: Advanced Image Settings:
CSS Class: alignright wp-image-1996 “fancybox-iframe” Updated
Updated Page!

3. Go to the front end (to a test page) Refresh!
When I click the image, opens full screen image and url is: https://www.youtube.com/v/MOiyD26cJ2A?rel=0&autoplay=1

I am not sure where I went wrong….. I think your instructions were clear enough.

Afterwords I went to image edit and under advanced/Advanced link settings/CSS Class it was empty i just added fancybox-iframe without quotation marks.
It opened in lightbox on the desktop computer, on mobile it opens just little white strip and does nothing.
Then, I re-sized window on my PC, to about 300px wide, it showed same white strip, very tall in height and about a half width of the screen, and when movie opened, it was tiny video width was a half of the screen and high was proportional, but basically too small.

I have mobile Sony Xperia, one with a lower specs, maybe it would work better on higher resolution mobiles, but the point is it should be showing optimized, even on lower resolution mobiles.

On my non test page I have iframes imbedded in the page, and if works very good, optimized anyhow, only bad thing is that I have a choice of 3 images by YouTube and they are nor that pretty, that is the reason I would like to present better thumbnail images. I am not sure can it be done at all….

Best regards
Srdjan

Hi Srdjan, yes css class without quotes. And you need to go back to Settings > Media and set a fixed width/height that corresponds with the movie ratio (width:560 and height:315 corresponding with the embed size suggested on Youtube for example) in the iFrame section at the end there…

Hello RavanH,

Thanks for the reply.
This is what I have done:
1. settings/media/fancybox/iframe originally was width:70% height 90% I changed to width:560 height 315 save.
2. Play on PC, works fine, when I make width of my browser window, there is plenty black top and bottom, but less than before.
3. mobile, refresh, and tap, white strap, not long as it was before appear, I still have the message, “Download Started….” and it starts downloading, but it doesn’t play video.
4. My thought: if I adjust size at the settings/media/fancybox/iframe, that means, that I can play only that aspect ratio videos?
If there are other aspect ratios, well it will not be set…

Best regards
Srdjan

3. mobile, refresh, and tap, white strap, not long as it was before appear, I still have the message, “Download Started….” and it starts downloading, but it doesn’t play video.

This would indicate that the movie cannot be played on that device at all. Can you share a link to the web page that you are trying this on?

4. My thought: if I adjust size at the settings/media/fancybox/iframe, that means, that I can play only that aspect ratio videos?

It can be done with the method that involves the Metadata extension I described earlier (second reply in this thread) but you must use fancybox-iframe instead of fancybox-youtube …