<patTemplate:tmpl name="pageoutput" unusedvars="strip">
<script type="text/javascript">
jomresJquery(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
	<patTemplate:tmpl name="rows2" unusedvars="strip">
    var url_{VIDEO_ID_SANITISED} = '//www.youtube.com/embed/{VIDEO_ID}';
    </patTemplate:tmpl>
	
    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    jomresJquery("#helpModal").on('hide', function(){
		<patTemplate:tmpl name="rows3" unusedvars="strip">
        jomresJquery("#{VIDEO_ID_SANITISED}").attr('src', '');
		</patTemplate:tmpl>
    });
    
    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    jomresJquery("#helpModal").on('show', function(){
		<patTemplate:tmpl name="rows4" unusedvars="strip">
        jomresJquery("#{VIDEO_ID_SANITISED}").attr('src', url_{VIDEO_ID_SANITISED});
		</patTemplate:tmpl>
    });
});
</script>
<style>
/* Needed to allow BS2 (spit) modals to scroll fully when the body of the modal is longer than the visible page */
.modal-guts {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
</style>
<a href="#helpModal" data-toggle="modal" faq-modal-title="{VIDEO_TUTORALS_TITLE}" random_identifier="helpModal" class="btn btn-success"><i class="fa fa-youtube-play"></i> {VIDEO_TUTORALS_TITLE}</a>

<div class="modal hide fade" id="helpModal">
	<div class="modal-guts">
		<div class="modal-dialog">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">x</button>
				<h3 class="modal-title">{VIDEO_TUTORALS_TITLE}</h3>
			</div>
			<div class="modal-body">
				<patTemplate:tmpl name="rows1" unusedvars="strip">
				<h3>{TITLE}</h3>
				<p>{DESCRIPTION}</p>
				<iframe id="{VIDEO_ID_SANITISED}" width="100%" height="200" src="" frameborder="0" allowfullscreen></iframe>
				<p>&nbsp;</p>
				</patTemplate:tmpl>
			</div> <!-- modal-body -->
		</div> <!-- modal-dialog -->
	</div> <!-- modal-guts  -->
</div> <!-- modal-dialog -->
 
</patTemplate:tmpl>