How to display video thumbnails in list and grid patterns
I am trying to create the video list and grid layouts as shown on the demo page here. Unfortunately, the video thumbnails do not show, as illustrated in the screenshots. If I choose to show images rather than videos they do show (see screenshots).
My setup is as follows:
1. I have created articles in the category "Video tests".
2. In the Data source of the Responsive grid module I have chosen this category as the category for displaying the articles.
3. In the Display tab of the module I have chosen to show "Videos" with the "Elegant" theme.
4. I have chosen to show the Detail box, with the settings as shown in the accompanying screenshot.
5. The following text (with variation only in the code of the video and the text of the video number) is entered into the Content tab of the articles.
<iframe src="https://www.youtube.com/embed/GO376G4tbGM" width="350" height="197" title="YouTube video player" frameborder="0" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"> </iframe><p> Some text to introduce the article video 1. Some text to introduce the article video 1. Some text to introduce the article video 1. Some text to introduce the article video 1. Some text to introduce the article video 1. Some text to introduce the article video 1. Some text to introduce the article video 1. Some text to introduce the article video 1. Some text to introduce the article video 1. </p>
6. My understanding is that the Responsive grid module should pick up the iframe code from the article and show that video in the thumbnail of the list or grid layout of the module. However, nothing is displayed in the thumbnails. If I display the article itself, the video does show in the body of the article. This means that the iframe code is correct.
Any help in getting this to work would be much appreciated!
Best regards
Bruce
5 answers
You're welcome.
Thank you for that information. I'm sure I will be able to sort it out from there.
Best regards
Bruce
Hi Bruce,
Try replacing the lines:
$temp = strip_tags($string, '<iframe>');
preg_match('/<iframe[^>]+><\/iframe>/i', $temp, $video);
with
$temp = strip_tags($string, '<iframe><div>'); // Allow both iframe and div tags
preg_match('/<div[^>]+><iframe[^>]+><\/iframe><\/div>/i', $temp, $video); // Match the combined div and iframe
Thank you for that answer. It does indeed sort out the problem. I can also see why this is the case by looking at the regular expression pattern for video code in the Responsive Grid helper file.
Now I have another, related question. I have videos that are hosted on bunny.net which use this kind of code for the embedded player:
<div style=" position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/108305/e065adfe-03d2-4c32-83d7-515ec9c70ccc"style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"loading="lazy"allow="accelerometer;gyroscope;encrypted-media;picture-in-picture;"allowfullscreen="allowfullscreen"></iframe></div>
So it is similar to the YouTube video code, but has the the additional opening and closing div tags. I can see that it would be relatively straightforward to modify the regular expression pattern in the helper file so that it would pick up this code (including the opening and closing div tags).
Can you tell me whether it would be possible to create an override (or even a plugin) to make this change in the helper file (line 536)?
Thanks again!
Best regards
Bruce
Hi Bruce,
Try to delete the space before the closing </iframe> tag.
For example: