Converting HTML to shortcode

[Eric Emanuel]

Hello, everyone

I've been studying how to create shortcodes and have found some good examples of how to do it, but I'm using a more complex HTML code and can't figure out how to "translate" this to Javascript.

This is the HTML code I've been using to create a div with movie background and two phrases over it. Can you help me with the Javascript that outputs this code and allow me to control the variables inside it?

<section class="content-section video-section">
<div class="pattern-overlay">
  <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=fdJc1_IBKJA',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
        <h1>Full Width Video</h1>  
        <h4>Enjoy Adding Full Screen Videos to your Page Sections</h4>
        </div>
      </div>
    </div>
  </div>
</section> 

Thanks!

[Eric Emanuel]

Ok, it took some time but I was able to find a solution by myself. The main problems were:

1. There's a great number of variables in this code
2. Some of them use "double-quotes" and others use 'single-quotes', so you have to carefully organize interchange these two. It's very, very easy to make mistakes here.
3. I have no idea why, but using 'videoURL' as a variable didn't work, I had to change it to 'videolink' in this case. I guess it's a conflict, but I'm not sure about that.

The strategy that saved me was looking into the font-code generated by the browser. The point of the shortcode is to generate exactly the same HTML code as above if there's no user input, so I only had to look at the generated code, compare with my original code and fix the problems. Patience is important here.

The result is: I can now create divs with video background and text over it only writing this in any page:

[video]
[videoitem videolink="https://www.youtube.com/watch?v=fdJc1_IBKJA" title="This is a Title" subtitle="This is a subtitle"][/videoitem]
[/video]

For the curious, this is the CSS I'm using:

.video-section .pattern-overlay {
	background-color: rgba(71, 71, 71, 0.59);
	padding: 110px 0 32px;
	min-height: 496px; 
	/* Incase of overlay problems just increase the min-height*/
}

.video-section h1, .video-section h4{
	text-align:center;
	color:#fff;
}

.video-section h1{
	font-size:110px;
	text-transform: uppercase;
	margin: 40px auto 0px;
	text-shadow: 1px 1px 1px #000;
	-webkit-text-shadow: 1px 1px 1px #000;
	-moz-text-shadow: 1px 1px 1px #000;
}

.video-section h4{
	font-size: 25px;
	margin: 0px auto 15px;
}

.video-section .buttonBar{
	display: none;
}

.player {
	font-size: 1px;
}

Awesome! =D

[Author]

Posts