Tagged: ,

Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
    Posts
  • #750220

    I’ve read through the dozens of threads over the years about opening a Youtube video in a lightbox with a review thumbnail generated by Youtube.

    It seems this is impossible unless I create an image of that links to the Youtube video? But that means manually generating a thumnail? Is there another way to do this?

    It would be so nice if the video element had a lightbox option. Right now the video element produces a huge sized video (full screen) unless you put it in a layout element, but then if you do that the video is very small.

    I have also seen this option in Enfold support forums:
    Click me to open a video

    But that does not generate a thumbnail / picture for the user to click on… just a “click me” text.

    It seems counter-intuitive to use the image element to display a video element, but is that the current workaround, or is there something I’ve missed? And any way to auto-generate the Youtube thumbnail ?

    Thanks

    #750230

    PS Based on another thread I saw from Yigit, I made sure the url is full length and still lightbox only opens in mobile, not in desktop:

    Thanks!!!!

    #750696

    Here’s where I am now… but it took me all morning for something that should be really simple….

    http://www.thomashenthorne.com/marin-luxury-homes-sizzle-reel/

    I ended up pulling the thumbnail from Youtube, then going into Photoshop and creating an image with the red “play” button graphic, then merging those two, then saving as an image, then linking the image on the page to the Youtube video but with the special format Yigit suggested in different thread to different user, then I had to create “only_desktop” css class because on mobile this version doesn’t work (have to hit two clicks) whereas the normal insert video element works great on mobile (e.g. launches Lightbox).

    The video element on desktop should also by default launch a lightbox… this is a lot to go through just to have a Youtube video launch in lightbox, yes?

    Help…..

    Thanks!!!!!!!!!!
    Rob

    #750701

    Hi,

    Please feel free to request – or vote if already requested – such feature on Enfold feature request form.

    Alternatively, you can try using this plugin – http://tubepress.com/. As far as i know, it generates thumbnails automatically. If you would consider this plugin, please contact plugin authors and ask them if they had any experience with Enfold. I remember a user was using it on Enfold but i am not sure if they are still compatible :)

    Best regards,
    Yigit

    #750702

    Thanks for your response as always, Yigit!

    I was afraid that was going to be the case, that launching a video in lightbox in desktop is an enhancement even though in mobile that’s already the behavior. I think this is something between a bug and an enhancement but I won’t debate…. :)

    The issue I run into and the reason I’m using Lightbox for the video is that if I just use the video element, it’s HUGE on the page…. and if I put it inside a layout element (1/5 + 3/5 + 1/5) then it looks too small (Goldilocks…)

    Is there a different way to get at the goal, which is to have a nice centered video that is larger than the 3/5 above but smaller than the full screen that the video element produces?

    Thanks!!!!!!!!

    #750711

    Hey!

    Could you please try adding your video element inside a color section element with a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and add following code to Quick CSS to control the width? :)

    #your-unique-id .container { max-width: 900px !important; }

    Cheers!
    Yigit

    #750715

    That is a very good idea… I will try that and let you know how it goes!

    #750717

    Hi!

    Great! We will keep the thread open and wait to hear from you :)

    Best regards,
    Yigit

    #1140118

    I am going to bump my own thread from a couple years back…. has the ability to launch Youtube videos in lightbox been added to Enfold yet? As I recall, this capability used to exist?

    Thanks,
    Rob

    #1140408

    Hi,

    The lightbox can be set to open any page content.

    If you like to open a youtube video when a thumbnail image is clicked please add “?iframe=true” to the end of the video link in the image element.

    For more info please check the below link

    Best regards,
    Vinay

    #1140485

    I have seen the iframe=true recommendation in other threads and feedback from users is that it no longer works.
    I tried it in this format:

    and there was no change in behavior. Same if I get rid of the rel=0 parameter.

    It appears from this Youtube developer URL that there is a way for Enfold to include this capability:
    https://developers.google.com/youtube/player_parameters

    “Embed a player using an <iframe> tag
    Define an <iframe> tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The <iframe> tag’s height and width parameters specify the dimensions of the player.

    If you create the <iframe> element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:

    https://youtube.com/watch?v=VIDEO_ID

    The <iframe> tag below would load a 640x360px player that would play the YouTube video M7lc1UVf-VE. Since the URL sets the autoplay parameter to 1, the video would play automatically once the player has loaded.

    <iframe id=”ytplayer” type=”text/html” width=”640″ height=”360″
    src=”https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com”
    frameborder=”0″></iframe>”

    I tried adding the above code to a code block on a dummy page and it does not launch lightbox either… are you sure Enfold is set up to do lightboxes for Youtube? Maybe Gunter can add a checkbox option to the video media element?

    Thanks!
    Rob

    #1141646

    Hi,

    Thank you for the update.

    You don’t need to add the iframe parameter as long as you’re using the correct URL format. Add an image element, set the link manually and put the youtube URL. You can also use a text link if you want.

    https://www.youtube.com/watch?v=HwKzLYeeOMs
    

    The lightbox script will be automatically activated because the URL contains the string “youtube.com/watch”.

    Best regards,
    Ismael

    #1141651

    Ismael,
    That’s interesting – thanks… so we use an image element and then use a Youtube link. That does work – but I’m curious, why doesn’t this work on the video element?

    This seems like an odd workaround? Is there a way to get the “play” button to appear the entire time vs. just on hover… when people see the image they may not realize it’s a video.

    And then on mobile, it just looks like a photo and you can’t tell it’s a video if you click.. what do you recommend? Use photo element with link for desktop and use video element with link for mobile? It would be so wonderful if video element would just do this… ;) Or is there another solution?

    Thanks!!!
    Rob

    #1141833

    Hi!

    Thank you for the update.

    You can create an image with a custom “play” button in it — usually contained in a dark transparent background. That should be sufficient to tell the users that there is a video element in the page.

    Regards,
    Ismael

    #1141911

    That’s a lot of work just to get a lightbox… but thanks, I have taken this approach in the past and had forgotten it.
    You have to:
    1. Create image with play button
    2. Insert via photo element with custom link
    3. Code as display on desktop only
    then
    1. Insert video element
    2. Code as mobile only

    Glad to hear from another thread that Gunter has added this to the future workflow…. given how pervasive video is now I would hope we can have an easier solution soon. Thanks for reminding me of this approach! OK to close thread.

    Best,
    Rob

    #1142264

    Hi,

    I cannot reproduce on my android phone that a youtube video opens in lightbox – using video element (see link in private content). The link below opens in the lightbox.
    Seems to be OS depending ?

    Best regards,
    Günter

    #1142400

    Hi Günter,
    Perhaps it is… I have iPhone, and the video element launches perfectly in a lightbox.
    Please let me know if I can be of any assistance.

    Best regards,
    Rob

    #1143189

    Hi,

    Looks like @guenter is starting to implement the script, which will allow the video element to directly open inside a lightbox. It will probably be included in the next release.

    Thank you for your patience.

    Best regards,
    Ismael

    #1143848

    Hi Hi Günte & Ismael,

    I was excited to download and install the new Enfold version which allows desktop lightboxes! Thank you!

    I learned it is definitely important to use the specific video url format Ismael listed above. I did notice that the rel=0 parameter, which causes Youtube to only show related videos from your own channel when user pauses or ends video, is not working. Is that being passed to Youtube?
    format: https://www.youtube.com/watch?v=HwKzLYeeOMs?rel=0

    Thanks,
    Rob

    #1143856

    Bad news… when I push this from staging (no caching) to production (WP Engine server side caching) the video does not play… when you click ‘play’ it does not launch the lightbox.

    Here’s a page I created for you where you can see behavior and any console errors if that helps:

    https://www.thomashenthorne.com/for-gunter-and-ismael/

    Thanks,
    Rob

    #1143857

    Hi Rob!

    Hope you are doing well :)

    I checked your page but it loaded fine on my end. I attached a screenshot in private content field. Could you please flushing browser cache and check once again?

    Best regards,
    Yigit

    #1143861

    i use for the links only images – take what ever you like – and on that image i paste in a youtube link
    i wrote a little jQuery script to get the image from youtube itself – but i take for it always the mqdefault.jpg from youtube.
    Not all videos got hd preview images.
    they are all at: https://img.youtube.com/vi/'+ ID +'/mqdefault.jpg

    if you like to change it to :
    default.jpg (default size)
    mqdefault.jpg (Medium Quality Version)
    hqdefault.jpg (High Quality Version)
    maxresdefault.jpg (Maximum resolution)

    so see the script-file and in use on : https://webers-testseite.de/youtube-videotestseite/

    on top there is a masonry gallery with custom (youtube) links : all with watch?v=
    on the bottom there are images with custom (youtube) links – dito all with watch?v=

    PS: the code on that page is only for that page-id : you had to get rid of that if you like to use it globaly
    and: that code field has on top right a copy button

    #1143891

    Yigit! Good to hear from you again!

    Thanks much – you are right, I flushed browser and it works! I can’t believe after all these years that still trips me up haha. :)

    Any ideas on the rel=0 (related videos only for your own channel)?

    Thanks!!
    Rob

    #1143893

    Thanks 007…. I don’t think my abilities are there yet…. hoping that I can just get the new video element working… so far the new one is great, just hoping I can get the rel=0 to work.

    Thanks!
    Rob

    #1143896

    if you have an account on yourtube and the videos are yours – you can setup this in your youtube settings.
    Then only related videos are shown from your channel.

    #1143901

    Hi 007, my channel is set up this way and rel=0 works fine without lightbox element enabled. I am guessing it’s something with the coding where rel=0 isn’t being handed off to the Youtube API.

    Thanks

    #1144429

    Hi,

    You need to use ampersand before the rel parameter because the URL query string already started when we define the video id (v).

    https://www.youtube.com/watch?v=HwKzLYeeOMs&rel=0
    

    Best regards,
    Ismael

    #1144533

    Thank you so much!! Lightbox now works perfectly on desktop and mobile. Thank you!!

    Excellent support is the main reason I have been using Enfold for so many years now. You’re all invited to the next premiere party!

    OK to close ticket.

    Thanks and best,
    Rob

Viewing 28 posts - 1 through 28 (of 28 total)

The topic ‘Open Youtube Video in Lightbox’ is closed to new replies.