board.html

{% extends "base.html" %}
{% block meta %}
		<script src="//www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
{% endblock %}
{% block body %}
		<div class="boardname">/{{ board }}/ - <i>{{ desc }}</i></div>
		{{ getform(board)|safe }}
{% for num, post in posts.items()|sort(reverse=True) %}
		<div class="thread" id="{{ num }}">
			<div class="post op">
				<div class="intro">
					<span class="title">{{ post.title }}</span>
					<span class="name">{{ post.name }}</span>
					<time datetime="{{ post.time }}" title="{{ post.time }}">{{ post.ago }}</time>
					<span class="id"><a href="#{{ post.id }}">>>{{ post.id }}</a></span>
				</div>
				<div class="body">
					{{ post.htmlbody|safe }}
				</div>
			</div>
{% for comment in post.comments %}
			<div class="comment" id="{{ comment.id }}">
				<div class="intro">
					<span class="title">{{ comment.title }}</span>
					<span class="name">{{ comment.name }}</span>
					<time datetime="{{ comment.time }}" title="{{ comment.time }}">{{ comment.ago }}</time>
					<span class="id"><a href="#{{ comment.id }}">>>{{ comment.id }}</a></span>
				</div>
				<div class="body">
					{{ comment.htmlbody|safe }}
				</div>
			</div>
{% endfor %}
			<div id="submit_{{ post.id }}">
				{{ getform(board, post.id)|safe }}
			</div>
		</div>
{% endfor %}
		<script>
			var CaptchaCallback = function(){
				captchas = document.getElementsByClassName("g-recaptcha");
				sitekey = "6LflIhYTAAAAAMjviNtwSFDrHuOVIHvCQIOpDDg6";
				for (var i = 0; i < captchas.length; i++) {
					grecaptcha.render(captchas[i].id, {'sitekey': sitekey});
				}
			};
			document.onload = function() {
				// So linking to posts works
				window.location.hash = window.location.hash + " ";
			}
			var videos = document.getElementsByTagName('video');
			for (var i=0; i<videos.length; i++) {
				videos[i].setAttribute("muted", "");
				videos[i].setAttribute("loop", "");
//				videos[i].setAttribute("controls", "");
				meter = document.createElement("meter");
				meter.style.visibility = "hidden";
				meter.style.display = "none";
				meter.max = 1;
				videos[i].meter = meter;
				videos[i].setAttribute("onmouseover", "this.play(); videos[" + i + "].meter.style.visibility = \"visible\"; videos[" + i + "].meter.style.display = \"block\";");
				videos[i].setAttribute("onmouseout", "this.pause(); videos[" + i + "].meter.style.visibility = \"hidden\"; videos[" + i + "].meter.style.display = \"none\";");
				videos[i].onloadedmetadata = function() {
					this.meter.style.width = this.offsetWidth + "px";
				};
				videos[i].ontimeupdate = function() {
					this.meter.value = this.currentTime / this.duration;
				};
				videos[i].parentNode.insertBefore(meter, videos[i].nextSibling);
			}
		</script>
{% endblock %}