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

tplowe56

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

acrylian

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.

tplowe56

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.

tplowe56

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

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?

tplowe56

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

tplowe56

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

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

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

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

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

@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.

tplowe56

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

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

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

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

thanks malte
really appreciate the help

vincent3569

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

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

vincent3569

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

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

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

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.

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

@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

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

@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

@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

@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

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

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

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.