Solution 1 :

String concatenation works with the addition operator +. For every variable that you want to include, close the string and add the value to the string, then open the string again to continue. + '<br>' + '<video autoplay><source src="' + p.vidName + '" type="video/mp4"></video>'

In more modern days you have Template Literal strings which are made with backticks ` and allow you to inject variables with the ${value} syntax.

`${}<br><video autoplay><source src="${p.vidName}" type="video/mp4"></video>`

Problem :

Ok, so I have really tried to find a solution, but none worked so far. Here it goes:
While clicking on a various marker I want to play the video named vidName defined in marker attributes.

I have created variable “points” with markers, where each contains parameters (version shortened):

var points = [{
    latlng: [54.351223, 18.643997],
    title: "F-1",
    name: "name1",
    vidName: "file1.mp4"
  }, {
//another points with same structure

To add it to map I use a function that allows .on(‘click’) event which uses .setContent() to show data inside definied box called “myCustomControl”, as follows (also shortened):

points.forEach(function(p) {
  const marker = L.marker(p.latlng, {
      title: p.title,
      riseOnHover: true
    .on('click', function(e) {
      myCustomControl.setContent( + '<br>' + '<video autoplay><source src="p.vidName" type="video/mp4"></video>');

So I would love to use '<video autoplay><source src="p.vidName" type="video/mp4"></video>' to show video named file#.mp4.
p.vidName as standalone works properly and shows name file#.mp4, when I use file#.mp4 inside HTML tag, the video works fine.

I’ve tried various things, like javascript:," #{}" and all the possible straightforward combinations I could figure out or google down. I am really not a proper programmist, I’m definitely missing some syntax or a simple tool.


Comment posted by Mateusz Gnys

I was like 1 inch close to the answer then, I did not put