Live pryoCMS codes - videobox

Write pyrocms codes live.

by James Doyle

HTML

<section class="title">
  <h4>Video Window</h4>
</section>
<section class="item">
  <div class="form_inputs">
    <ul>
   <li class="">
      <label for="video_link">Video Link</label>
      <div class="input"><input type="text" name="video_link" value="" class="video_link" placeholder="http://" />
</div>
    </li>
    <li class="even">
      <label for="video_width">Video Width</label>
      <div class="input"><input type="text" name="video_width" value="" class="video_width" placeholder="330px" />
</div>
    </li>
    <li class="">
      <label for="video_height">Video Height</label>
      <div class="input"><input type="text" name="video_height" value="" class="video_height" placeholder="248px" />
</div>
    </li>
   <li class="even">
    <div id="button_code">
     <p>Copy the text below and paste into the body of a page.</p>
     <div id="code">{{ rspec:video link="<span class="video_link"></span>" width="<span class="video_width">248px</span>" height="<span class="video_height">330px</span>" }}</div>
   </div>
 </li>
</ul>
</div>
</section>

CSS

#code {
    padding: 10px;
    background: #eee;
}

JavaScript

$(document).ready(function() {
    $('input').bind('keyup', function() {
        var match = 'span.' + $(this).attr('class');
        $(match).html($(this).attr('value'));
    });
    $('select').bind('change', function() {
        var match = 'span.' + $(this).attr('class');
        $(match).html($(this).attr('value'));
    });
});