[Resolved] Display Multiple Videos from Url

[Author]

Posts

[korieF]

Tell us what you are trying to do?
I am trying to display multiple videos through the URL field. I have multiple youtube links added into the fields, but only one video displays.

Is there any documentation that you are following?
https://toolset.com/forums/topic/display-more-than-1-video-from-a-video-url-embedded-media-custom-field/
This seems like exactly what I need, but I do not know how to set up shortcodes.

Is there a similar example that we can see?

What is the link to your site?
hidden link
Example page where only one video is showing up: hidden link

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

From the code, it seems that you're using the Youtube block to show the videos, but it can be used to show only a single video.

For multiple YouTube Videos, you can follow these steps:

1. Instead of using the "URL" field, you can add a new "Embedded Media" type field with a slug "youtube-videos" and set it to have multiple instances.

2. After that, you can insert a "Fields and Text" block in place of the YouTube block and then add the shortcode for this new field like this:
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#embedded-media )

[wpv-for-each field="wpcf-youtube-videos"]
[types field="youtube-videos"][/types]
[/wpv-for-each]

You can read more about the "wpv-for-each" shortcode for the repeating fields, at:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-for-each

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[korieF]

Thank you so much! This did work to display all of the videos.
I am now wondering if there is a way to have them displayed in a gallery view or a slider like the images?

[Waqar]

Thanks for the update and glad that it worked.

I'm afraid, there is no built-in feature to show multiple videos from the custom field in a slider or gallery view, so you'll need to use some custom code.

For example, you can wrap the output of the videos in a special HTML structure:

<div class="video-container-wrapper">
[wpv-for-each field="wpcf-youtube-videos"]
	<div class="video-container-item">
		<div class="video-container">
		[types field="youtube-videos"][/types]
		</div>
	</div>
[/wpv-for-each]
</div>

And next, include the following custom CSS code in the content template, to show these videos in a gallery-like grid:

.video-container-wrapper { display: block; overflow: hidden; }

.video-container-wrapper .video-container-item {float: none;width: 98%; overflow: hidden; margin: 1% 1% 4% 1%; background: #fff; padding: 1%; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%); }

.video-container-wrapper .video-container-item .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container-wrapper .video-container-item .video-container iframe, .video-container-wrapper .video-container-item .video-container object, .video-container-wrapper .video-container-item .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (min-width: 801px) {
.video-container-wrapper .video-container-item { float: left; width: 30%; overflow: hidden; margin: 1% 2% 2% 1%; }
}

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization ideas and recommendations, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[korieF]

My issue is resolved now. Thank you!