zpBootstrap/Fancybox - play Youtube videos directly - should be able to work

I have one album & sub-albums devoted to YouTube videos. I use the method using class-textobject, which uses a jpg file and a text file with the YouTube embed code, that are named exactly the same. This works fine if you click on the file name link below an image, but not if you click directly on the image (when using zpBoostrap).

I have been reading the Fancybox documentation that states that fancy box handles YouTube links quite easily. Anyone have ideas if this could be implemented in Fancybox if the correct code is used in the text file?

My current text is very simple, but it gives an error from Fancybox.

Here is the documentation for video on Fancybox: http://fancyapps.com/fancybox/3/docs/#video

Thanks

«1

Comments

  • acrylian Administrator, Developer
    edited January 2019

    If I read correctly you should add something like this<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk"> YouTube video </a> into the textobject so fancybox triggers on it. That's the URL of the video page and not the Youtube embed code.

  • Pretty sure I tried that. But it seems like if ZP hands off that code to Fancybox it should play the video. I will look at Fancybox settings in zpBootstrap next.

  • Did a quick look through the Fancybox javascript and it appears that processing youTube videos is quite robust. It must be something simple to get Fancybox to trigger the the YouTube video.

  • vincent3569 Member, Translator

    I am afraid I never used this feature of zenphoto.
    I have no idea how videos work in general with zenphoto and how it should work with zpBoostrap.

    as requested before, can you provide a link to have a look?

  • Vincent my gallery is private. I have sent you address & credentials via the contact form on your personal gallery.

  • Hosting videos via YouTube is quite a bit better at serving to users than hosting videos on a shared server. The method I mention above is quite simple. If it was just adapted to Fancybox it would be a good feature. The Fancybox code looks like it is designed to handle media from many, sources, just need to implement the proper code that transfers the link from ZP to Fancybox.

  • vincent3569 Member, Translator

    hi
    simply, I think my theme doesn't support videos as you want.
    do you use plugin class-video or one other?
    I need to know how reproduce your case, and hope so, improve my theme.

  • acrylian Administrator, Developer

    Pretty sure I tried that. But it seems like if ZP hands off that code to Fancybox it should play the video. I will look at Fancybox settings in zpBootstrap next.

    Then it might be a JS rebinding issue but I don't think because textobject is server side so all ready when Fancybox is initated. Review the code the theme produces if yo add the fancybox html discussed above.

    Textobjects are really code agnostic. You can enter any html and it is basically just printed out instead of the sized image on image types. You should really try this in a standard theme. If it works there it is something different in VIncent's theme (which I am not familar with).

  • vincent3569 Member, Translator
    edited January 2019

    ok, I understand:

    you use class-textobject with embeded code to your videos on youtube (https://forum.zenphoto.org/discussion/1409908/embedded-youtube-videos-no-longer-displaying-on-mobile-devices), using a tip of zenphoto (https://www.zenphoto.org/news/using-external-sources/#using-videos-from-youtube-or-other-portals).

    the best way to help you is to give the full context of your use case as it is not a standard behavior of zephoto!

    I will have a look...

  • acrylian Administrator, Developer

    Well, those are suggestions. textobject usage itself has no standard behaviour except outputting its content instead of the normal image.

    @vincent3569 Sidenote: I just wanted to try myself and somehow I could not activate the theme. Reason was that the folder/archive downloaded from Github is named zpBootstrap-2.2 while the theme name is actually zpBoostrap. So it needs to be renamed to zpBootstrap first. Probably other users stumble upon that so I suggest to add taht to the install instructions.

  • acrylian Administrator, Developer
    edited January 2019

    @tplowe56 I now understand what you tried. It tries to open the file directly this way which of course is not working. It will require the theme to handle non image files differently by outputting the textobject html directly on the thumb view. It might be possible to have the full-image.php return the content if protected full image view is enabled. Will take a look when I get the time.

  • Just FYI, the Basic theme presents YouTube videos just fine when clicking on a thumbnail. I have use this method for years, but I have set that video album to use the basic theme. The code I use in the text file looks like this:

    
                            
  • acrylian Administrator, Developer
    edited January 2019

    Yes, because the basic theme uses the image page itself and not any *box script like zpBoostrap that opens the file itself (the "full image" which in this case is not an image but a text file).

  • vincent3569 Member, Translator

    hi
    with zpBootstrap, it works too on image.php as with basic.
    the behavior of zpBootstrap on album.php is a following:

    • click on image name under image itself: redirect to image.php
    • click on image thumb: open image in fancybox (it's a behavior closed to gallerrific : able to see all images in albums page without reload image page for each image).

    to improve my theme to open video with fancybox in album.php, I have to detect if it's an image or a text file and then, adapt the code.

  • acrylian Administrator, Developer
    edited January 2019

    You can quite easily check if it is a real image or another "image" type within the next_image loop:

    if(isImagePhoto($_zp_current_image)) {
      // real image
    } else if(isImageVideo($_zp_current_image)) {
       //custom stuff for real video/audio "images"
    } else {
      $objectclass =strtolower(get_class($_zp_current_image));
      if($objectclass == 'textobject') {
        // do Fancybox custom code for textobjects - however caution since  textobject can be anything 
       }
    }
  • vincent3569 Member, Translator

    thanks malte
    really appreciate the help

  • vincent3569 Member, Translator

    hi
    I need help for video or audio files:
    with class-video, is there a way to know if there a video or audio file?

  • acrylian Administrator, Developer
    edited January 2019

    Best check the suffix using getSuffix(). It's generally .mp4/m4v for video and m4a/mp3 for audio.

  • vincent3569 Member, Translator

    hi again,

    to manage online video with my theme, I would like to create a new class, quite similar to the class-textobject class.
    I started doing this in a dedicated plugin.

    rather than this solution, is it possible to create it directly in my theme?
    if so, how should I go about it?

    thank you in advance for your help.

  • acrylian Administrator, Developer

    I can't answer without understanding what you exactly like to do and why you need a textobject class similar class. Generally if it is theme specific it should be part of the theme which is of course problematic since file types are core domain. Perhaps mail me directly about this.

  • sbillard Member
    edited January 2019

    Vince:

    You can create a class in your theme functions.php. Then this class will be present for your theme (and only your theme.) If it is really similar to class-textobject I suggest you make it a descendent of that class. E.G. class my-textobject extends class-textobject. Then you need to define only those methods which need to be different.

  • tplowe56 Member
    edited January 2019

    Vincent,

    Thanks so much for your efforts, (and the rest of the ZP crew that are helping).

    If you need any help testing just shoot me an email. I have everything running locally on Xampp so I can test easily.

    I've been following along, because of my interest. I'm hoping your coding for handling YouTube video?

    I have hosted my own mp4's on my shared server in the past and the playback is always terrible. That's why I switched to Youtube which is very robust and it's free.

    You can create playlists in your YouTube account, and if you use the proper embed code, your playlist is available in a popup menu on the screen.

    Alt text

    BTW I really like the zpBootstrap theme. Works so well on all devices.

    Seems like Fancybox & Bootstrap are both adaptable for YouTube vids, but I don't understand coding, so I am no help.

    http://fancyapps.com/fancybox/3/docs/#video

    https://getbootstrap.com/docs/4.1/utilities/embed/

  • vincent3569 Member, Translator

    @acrylian: I have to get the src content in the txt file content (of course, if that file have an embed code to online video like <iframe src="//www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&rel=0"></iframe>)

    @sbillard:
    thanks for the tip.
    I tried it but in fact it doesn't work as exepected: if I add a class in my function.php file, relevant objects are not seen in admin (ie: for ordering pictures or to edit them)

    so, as I don't want to create a sidecar plugin for my theme, I found another solution (really more simple!): create a local function to suit my needs.

    @tplowe56: Of course, I know my theme works on all devices (I created it for that!).
    I am working to improve it to manage Youtube and Vimeo online video and to see them in Fancybox.
    be patient, and of course fell free to "buy me a beer" (donate link: https://www.vincentbourganel.fr/pages/zpbootstrap-2.2/).

  • vincent3569 Member, Translator
    edited January 2019

    I need to test little more and package my improvement, but you can the the result here: https://test.vincentbourganel.fr/images/illustrations/.

    a click on the thumb enable to see the video with fancybox and a click on the video name (youtube or vimeo) enable to see it in image page with responsive behavior.

  • acrylian Administrator, Developer

    @vincent3569: Basically the normal fullimage function gets/prints the content of the textobject so you could just use the "get" version to get the url and then create the output fancybox needs.

  • vincent3569 Member, Translator
    edited January 2019

    @acrylian:
    I don't need to get the url of the txt file itself, but I have to get the src in the txt file content, following the tip (https://www.zenphoto.org/news/using-external-sources/#--using-videos-from-youtube-or-other-portals).

    I created a personnal function for that, and it works fine.

    Have a closest look to my previous post.

  • acrylian Administrator, Developer

    @vincent3569 I didn't say anything of the url actually. getCustomImage (or the getContent() method) if used with textobject should get the content of the textobject, thus the url of the youtube video.

  • vincent3569 Member, Translator
    edited January 2019

    the text file content have to follow the patern:

    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&rel=0"></iframe>
    </div>
    

    with getContent(), I get the code above and I have to do text manipulation to only get src value (I only want to get //www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&rel=0).

    but nevermind, I got the right code and it works.

  • acrylian Administrator, Developer

    Not if you only store the youtube url in the textobject and have a theme function handle the actual html setup required for fancybox.

  • vincent3569 Member, Translator

    as far I can see, the tip for online video managed by textobject requires to store the full embeded code, not only a link to the video.
    and each online reader (youtube, vimeo, dailymotion,...) have their own reader configuration in the iframe parameters.

Sign In or Register to comment.