[Resolved] Display more than 1 video from a video URL (embedded media) custom field?

[Author]

Posts

[kai-peterW]

I have a custom field, a Video URL (Embedded Media) field to display a video from a dynamic source in a template. This works for 1 video.
The field is set to “Allow multiple instances of this field” and in the backend I can store multiple video URLs.
The content template is built with the Block Editor.

How to display all of the available instances of this field? Not only 1 video, but all of the existing videos??

I read a similar support question at https://toolset.com/forums/topic/i-need-to-create-a-video-gallery-at-least-display-all-my-video-links-in-front/
And your answer at https://toolset.com/documentation/customizing-sites-using-php/functions/#embedded-media

But I cannot figure it out how to use the [wpv-for-each] shortcode exactly??

If I use a shortcode field with [wpv-for-each field="wpcf-video-url"] [wpv-post-field name="wpcf-video-url"] [/wpv-for-each] then the 2 youtube links are displayed in a line but not the videos.

How to display more than 1 videos which are stored in a custom video URL (embedded media) field?
How to use the shortcode [wpv-for-each] exactly??

[Shane]

Hi Kai,

Thank you for getting in touch.
The correct way to use the [wpv-for-each] shortcode is like below.

[wpv-for-each field="wpcf-video-url"]
 
[types field="video-url"][/types]

 [/wpv-for-each]

Please let me know if this helps to resolve your issue.
Thanks,
Shane

[kai-peterW]

Dear Shane,
thank you very much. Your answer helped. It is working like a charm. Great.

Now I encountered another issue: how to set the size to 100% so the video covers all available space?

I tried the following without success:

[wpv-for-each field="wpcf-video-url"]
[types field="video-url" width="100%" height="100%" ][/types]
[/wpv-for-each]

Not working!

[wpv-for-each field="wpcf-video-url"]
<div class=”videosize”> [types field="video-url"][/types]</div>
[/wpv-for-each]

And with css setting class "videosize" to 100%.

Not working.

The shortcode block itself has no style options.

Must be the embedded iframe but adjusting there the css is also not working. Only if I set absolute width and height with px but then it is not responsive .....

Maybe you know the trick....

Regards,

Kai Peter

[Shane]

Hi Kai,

Its quite possible that the container is restricting the width of the video.

Would you mind allowing me to have admin access to the site as well as a link to the page so that I can have a look.

I've enabled the private fields for your next response.

Thanks,
Shane

[kai-peterW]

Hi Shane,
I found the hints from another Toolset customer.

The solution was with the following shortcodes and CSS

[wpv-for-each field="wpcf-video-url"]
<div class="video-container">
[types field="video-url"]
[/types]
</div>
[/wpv-for-each]

.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
margin-bottom: 32px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

My issue is resolved now. Thank you!