if someone has a better title for my problem, go ahead and change it... ;-)
I've been googling for quite a while but either I don't ask the right question or noone had struggles with this so far.
I'm working with TYPO3 7.6, fancyBox v3.0.47 (http://fancyapps.com/fancybox/) and my own content element which I created for an image-gallery. So far so good. Everything worked fine until the customer asked to add video files to that gallery. The gallery uses fancyBox for the lightbox and I use it as follows:
<div class="imgGalleryIMG">
<a href="/fileadmin{file.originalFile.identifier}" data-fancybox="gallery" data-caption="{file.description}">
<f:image image="{file}" crop="{file.crop}" />
</a>
</div>
The link is needed for the fancybox and the image inside is the previewed image (that can be cropped).
This works fine with images and I can change <f:image image="{file}" to <f:media file="{file}" /> so that the youtube video which is loaded into the content element with "Add media from URL" is displayed and starts playing when clicking on it but this way the lightbox from fancyBox won't popup and it stays as small as the preview-image.
I tried using a different approach and I got stuck with the youtube video. By using "Add media from URL" the video is being saved to the filelist as youtube-file (meaning it has the file-extension ".youtube") and it's title becomes the name of the file. When I use <f:debug> I can't find the real link (eg. https://www.youtube.com/watch?v=WEkSYw3o5is) nor the video id (eg. WEkSYw3o5is) to the youtube video. If I use the above approach that I use for the images, I have a preview-image of the video but when I click on it the lightbox opens and there's nothing else but the youtube-video-id displayed.
2nd approach:
<div class="imgGalleryIMG">
<f:if condition="{file.originalFile.properties.extension} == 'youtube'">
<f:then>
<a href="{file.originalFile.identifier}" data-type="iframe" data-fancybox="gallery" data-caption="{file.description}">
<f:image image="{file}" />
</a>
</f:then>
<f:else>
<a href="/fileadmin{file.originalFile.identifier}" data-fancybox="gallery" data-caption="{file.description}">
<f:image image="{file}" crop="{file.crop}" />
</a>
</f:else>
</f:if>
</div>
If I'm correct what I need is the link to the youtube video for the link for fancybox as stated in it's documentation.
What I really want is a display-image for the youtube-video, which on click will be revealed in the lightbox (without autoplay). How can I achieve this?
I would favour a solution that works changing the template only.
EDIT
With the first approach after rendering and fancybox doing its magic the result looks as follows:
<div class="fancybox-container fancybox-show-controls fancybox-show-infobar fancybox-show-buttons fancybox-container--ready fancybox-controls--canzoomIn" role="dialog" tabindex="-1" id="fancybox-container-1" style="">
...
<div class="fancybox-slider-wrap">
<div class="fancybox-slider" style="transform: translate(0px, 0px);">
<div class="fancybox-slide fancybox-slide--current fancybox-slide--image fancybox-slide--complete" style="transform: translate(0px, 0px);">
<div class="fancybox-placeholder" style="transform: translate(512px, 131px) scale(1, 1); width: 1024px; height: 767.94px; opacity: 1; transition: none;">
<img class="fancybox-image" src="/fileadmin/user_upload/pathToImg.jpg">
</div>
</div>
</div>
...
</div>
...
</div>
This is the lightbox code. The image-src is being taken from the link around the image in my first approach (not from the image-file). This is why I would like to get the youtube-url or the youtube-id into my partial with fluid.
SOLUTION
Thanks to minifranske I found an easy way to do it:
<f:if condition="{file.originalFile.properties.extension} == 'youtube'">
<f:then>
<a href="https://www.youtube.com/embed/{file.contents}" data-type="iframe"
data-fancybox="gallery" data-caption="{file.description}">
<f:image image="{file}" />
</a>
</f:then>
Thanks a lot! :)
To get the URL: {file.publicUrl}
To get the YouTube id: {file.contents}