How can I display the MP4 General Link Field?

Question

I want to display the MP4 video inside the file and I was trying to do it, but I get the issues when I try to display the field inside the component.

Here is the template:

So is it possible to get the MP4 file from the Media folder and then display it to the component?

The name of the field is Video Link. Should I make some new methods or is it easy to do?

Answer 1

I think you can achieve this something like this.

1. Use Internal Link Field rather than using the Media or Image field.

2. From the Path of the Internal Link get the Video Item and use MediaManager to get the URL.

   MediaItem video = Sitecore.Context.Database.GetItem(videoPath);
   
   string src = Sitecore.Resources.Media.MediaManager.GetMediaUrl(video);
   

You can refer to this link to find more.

Video url with Image type Field

Answer 2

Your question is fully answered in the Sitecore documentation: https://doc.sitecore.com/xp/en/developers/sxa/102/sitecore-experience-accelerator/create-a-video-header-background.html

Short version: use Scriban like this:

<video autoplay muted loop class="video-background">
  <source src="{{ i_item.video.target.media_url }}" type="video/mp4">
</video>

This example does assume your field is called video (always best to avoid spaces in the name of your fields btw - you can always use the Title of a field to display a more readable name to the editors) and is of type File (not link).