Can't find out correct links for audio and video files playing in the lightbox - single and video source set

[Ricolette256]

In the readme.md there is a good sample for playing a youtube video in the lightbox. But I have several videos in mp4 and audios in mp3 on my own webspace and I want to let play them (single) in a lightbox. I tried hard with my very limited knowledge, but I failed to create the correct link. And if the audio would play in the lightbox, how can it be stopped automatically, when the lightbox is closed by the visitor?

Further I want to know, how I should build a link with a source set of the same video, when they should play dependent from screen width and let the webbrowser decide, which to choose (i.e. no media query). There would be the video in 720p and in 1080p format.

In case, webbrowser could not choose the most fitting video itself, I would create two separate links with one video format each and a class, which contains the media query already. Perhaps this would be the better way instead of a video source set?

[viliusle]

Demo is missing video and audio, but all you need do is reuse HTML element. We, developers, did no expected that anybody will ask audio, but it works with only small issue - it will keep playing after closing modal dialog. @todo - fix it

<a href="?fallback_url" class="lightbox" data-type="html" data-target="#selector_audio" data-group="inline">
  Open audio
</a>

<div style="display: none;">
  <div id="selector_audio" data-group="iframe">
    <audio controls="" preload="none" width="232" style="width:232px;">
      <source src="//upload.wikimedia.org/wikipedia/commons/transcoded/b/bb/Test_ogg_mp3_48kbps.wav/Test_ogg_mp3_48kbps.wav.mp3"
    </audio>
  </div>
</div>

<hr />

<a href="?fallback_url" class="lightbox" data-type="html" data-target="#selector_video" data-group="inline">
  Open video
</a>

<div style="display: none;">
  <div id="selector_video" data-group="iframe">
    <video width="320" height="240" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
  </div>
</div>

Further I want to know, how I should build a link with a source set of the same video, when they should play dependent from screen width and let the webbrowser decide, which to choose (i.e. no media query). There would be the video in 720p and in 1080p format.

It can be tricky to implement it, but I suggest you to upload videos to YouTube and forget these problems, because YouTube will take care of it.

[viliusle]

Notice: do not close this ticket until audio problem will be fixed.

[Ricolette256]

Thank you very much for your quick and engaged answers. I have thoroughly checked your proposals.

There are some problems with the dimensions in the links: Width and height on audio don't have any effect. It seems, that the browser will define it by itself. The dimensions of the video cannot be defined by the values in the link correctly, as soon as the the width is larger than about 750px.

My source video is in 1080p and by loading in in the iframe, I define it to 720p dimensions. When I set width 750 and height 720, then this will result in the largest video dimensions in the iframe, without cutting off something from the right side of the video. But the resulting dimensions are well beyond the 720p dimensions. On your demo website, you can see a similar effect, when loading the YouTube video. Further: When I decrease the width of the browser window, at some point the iframe with the video will stop increasing but the video will be cut off from the right edge. Thus I will expect problems with this especially when on small screens like on mobiles.

BTW: The html-iframe, which contains a blog article from my website, is shown correctly with the dimensions, I define in the link. On mobiles, the iframe width will fit to the screen. But the height is not fitting and the bottom of the iframe will be out of screen then - especially when a mobile is on landscape mode.

Another point, I have with your link proposals is, that the resulting links, which are shown when hovering over the video links or audio links point to the URL of my website and not to the URL of the audio or video. That will result in a bad SEO, as the search engine cannot follow the links to the correct source. Is there another way for building the links, in order to keep it more SEO friendly?

BWT: I love lightboxes for audio and video, because it keeps visitors focused on the media content playing and not simultaneously going on surfing or reading. And I don't like to embed audio / video from other websources (like YouTube etc.) due to data privacy aspects.

[viliusle]

I pushed some changes to fix audio and video issues. But you will need to take latest code from develop branch or wait for next version.

p.s. I do not see any SEO issues, but you have to understand, that where you see ?fallback_url, you can add whatever you like here, so if you are opening mp3 file, add mp3 file path here. Link will only work if user will open link with CTRL or middle mouse button (AKA new tab).

And I don't like to embed audio / video from other websources (like YouTube etc.) due to data privacy aspects.

But YouTube provides much more benefit to user than HTML<video> tag. So if you don't like YouTube, its ok, but your users will miss some features. For example better UX, ability to change quality.

[midzer]

https://github.com/midzer/tobii/releases/tag/v2.5.0 is out with this feature. Thanks @viliusle. I think we can close this one.