[SOLVED] How to prevent Jekyll from generating closing tag for the source element?

How to prevent Jekyll from generating closing tag for the source element?

The MDN docs state the following on the <source> html element;

The HTML element specifies multiple media resources for the , the element, or the element. It is a void element, meaning that it has no content and does not have a closing tag.

However, Jekyll generates a closing </source> tags which isn't correct according to the docs.

I have the following in my template:

<source src="{{ item.gif-mp4 }}" type="video/mp4" />

Which generates:

<source src="/assets/uploads/the-blade.mp4" type="video/mp4"></source>

How do I resolve this?

I tried using a different markdown processor like redcarpet, which according to their docs should be able to remove the tags, but Jekyll won't work with that it says.

UPDATE: The following is more context:

<video-js
      class="vjs-fluid"
      data-setup='{"controls": false, "preload": "auto", "muted": true, "autoplay": false, "loop": false, "playsinline": true}'
      poster="{{ item.image }}">
      <source src="{{ item.gif-webm }}" type="video/webm" />
      <source src="{{ item.gif-mp4 }}" type="video/mp4" />
      <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports html5 video</p>
</video-js>

I also tried without the />, so just >

<source src="{{ item.gif-webm }}" type="video/webm">
<source src="{{ item.gif-mp4 }}" type="video/mp4">

But this gave me an even weirder output which put the closing source tags behind the paragraph:

<video-js
  class="vjs-fluid"
  data-setup='{"controls": false, "preload": "auto", "muted": true, "autoplay": false, "loop": false, "playsinline": true}'
  poster="/assets/uploads/poster.jpg">
  <source src="/assets/uploads/video.webm" type="video/webm" />
  <source src="/assets/uploads/video.mp4" type="video/mp4" />
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web
    browser that supports html5 video
  </p>
</source>
</source>
</video-js>

Notice the source tags after the paragraph and also the /> in the opening tag.

I do like to note however that the browser deletes these closing tags and the production site shows no errors but it still is weird and also the validator.org does notice all the errors.

Solution

I found the problem. It was caused by the plugin 'jekyll-loading-lazy'. Which also caused some other problems in my code for example it rendered both of these meta tags:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

Even though I only had

<meta charset="utf-8">

In my template.

Hope this might help others with weird problems!