<style>
	.iframe-container {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}

	@media (max-width: 570px) {
		.iframe-container {
			padding-top: 150%;
		}
	}

	@media (min-width: 570px) and (max-width: 760px) {
		.iframe-container {
			padding-top: 130%;
		}
	}

	@media (min-width: 760px) and (max-width: 980px) {
		.iframe-container {
			padding-top: 110%;
		}
	}

	@media (min-width: 980px) and (max-width: 1247px) {
		.iframe-container {
			padding-top: 95%;
		}
	}

	.responsive-iframe {
		border: none;
		border-radius: 10px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
</style>

<% if(!Allowed.allowed){ %><span style="color: red;"><%- Allowed.errorMessage %></span><br><% } %>
<textarea id="<%= option.optionId %>" name="<%= option.optionId %>" formType="embedBuilder"
		  style="visibility: hidden;width: .1px;height: .1px"><%- JSON.stringify(actual[s.categoryId][option.optionId]) || "" %></textarea>
<div class="iframe-container">
	<iframe class="responsive-iframe" src="https://courses.beatrun.ru/embedbuilder/index.html?username=<%=option.optionType.data.username%>&avatar=<%=encodeURIComponent(option.optionType.data.avatarURL)%>&message=<%=option.optionId%>"></iframe>
</div>
<script>
	setTimeout(() => {
		window.addEventListener('message', function (e) {
			if (e.data[0] === '<%= option.optionId %>') {
				console.log(e.data)
				document.getElementById('<%= option.optionId %>').innerHTML = JSON.stringify(e.data[1]);
				optionEdited(document.getElementById('<%= option.optionId %>'))
			}
		}, false);
	}, 1200);
</script>