6 years ago
9
Topic

Hi

Is there some popup typo we could apply on a vimeo or youtube field ?

So far we create a "media" content type that contains a youtube field. then we display a seblod list of these medias.

On each element of the list we display the youtube field and add a modal VIEW link on it. 

This is not bad but:

* the video thumbnail is no longer visible in the list (because of the link plugin above it)

* the modal box not only displays the video but also the content view of the media

* the video doesn't start playing automatically when the modal box opens

Thanks for your ideas

Cyril

Get a VIP membership
4229 Posts
Kadministrator
6 years ago
0
Level 1

6 years ago
1
Level 1

Thanks Klas

but I have to create a thumbnail of the video to be able to add the JS script on it. Is there a way to automatically generate this thumbnail please?

thanks

cyril

4229 Posts
Kadministrator
6 years ago
0
Level 2

Thumbnails are usually created o the embedded server side (e.g. youtube), there is no function to create video thumbnail in Seblod as far as I know.

6 years ago
0
Level 1

thanks Klas

6 years ago
0
Level 1

Hi

I created a seblod list that displays one image (md_media_video_vignette) of each content.

on this image we put a JS custom link with the code : jQuery('#collapseModal').modal('show');

In the modal position we put the video fields.

but when we display the list in the front end the videos are not displayed in a popup. We don't see the video appearing. however ALL the videos ifames are in the source code of the page (with CTRL-U).

Did we forget something please?

thanks

cyril

6 years ago
1
Level 1

Hi 

Actually the modal window that appears when you click on one element of the list ALWAYS displays the fields of the FIRST element of the list.

This is because the jQuery('#collapseModal').modal('show');  calls only searches for the first id that matches "collapseModal"

So how should we modify the custom JS link so that it only opens the current modal fields ?

Here is what I propose: REMOVE the custom JS link on the element view and ADD a JS code field in the SEARCH view:

var counter=1; 

$( ".list-galerie li" ).each(function() { counter++; $(this).attr('class', 'jojo'+counter); 

$('.jojo'+counter).attr('onclick', "jQuery('.jojo"+counter+" #collapseModal').modal('show')"); });

thanks

cyril

6 years ago
0
Level 1

Hi Klas

Yes we know selectors :)

The issue is that with lists if we put video fields in the modal position of each item, each iframe is here even if it is invisible !

As I wrote we removed the custom Js link and add a Js code in the search tab:

The JS code is:

var counter=1; 

$( ".list-galerie li" ).each(function() { 

counter++; 

$(this).attr('class', 'jojo'+counter); 

$('.jojo'+counter).attr('onclick', "jQuery('.jojo"+counter+" #collapseModal').modal('show')"); 

});

But on the front end,  if you click on some images you actually lauch the video you don't see! because each video iframe in the modal position  for each item is present here :

As a result you launch video N when you just want to click on some other thumbnail!

I'm looking for a way to really make those iframes not present until the modal window pops up

Cyril

6 years ago
0
Level 1

Hi

We found the solution as follow with the JS script in the search tab :

var counter=1; 

$( ".list-galerie li" ).each(function() { 

counter++; $(this).attr('class', 'jojo'+counter); 

$('.jojo'+counter).attr('onclick', "jQuery('.jojo"+counter+" #collapseModal').modal('show')"); 

$('.jojo'+counter+' #collapseModal').on('hidden.bs.modal', function () { $(this).find("iframe").attr('src', $(this).find("iframe").attr("src")); 

}); 

});

thanks

Cyril

Get a Book for SEBLOD