Color theme
Experimental
by arcm111
HTML
<div id="header">
<button onClick="this.nextElementSibling.style.display = 'block'">
Click Me
</button>
</div>
<div id="block">
When the embedded document has the same origin as the main page, it is strongly discouraged to use both allow-scripts and allow-same-origin at the same time, as that allows the embedded document to programmatically remove the sandbox attribute. Although it is accepted, this case is no more secure than not using the sandbox attribute.
</div>
<div id="div">
Whatever
<script>
var parent = document.currentScript.parentElement;
var iframe = document.createElement ('iframe');
iframe.src = 'https://www.youtube.com/embed/zwLskz4HP44';
iframe.onload = function() {alert ("loaded")};
//parent.appendChild (iframe);
</script>
</div>
CSS
body
{
background: #374140;
padding: 0;
margin: 0;
}
#div
{
display: block;
color: #D9CB9E;
}
#header
{
height: 40px;
background: #2A2C2B;
padding: 10px 20px;
border-bottom: 3px solid #61C0F2;
border: none;
}
button
{
padding: 5px 10px;
background: #D9CB9E;
color: Black;
border: none;
}
#block
{
margin: 15px 30px;
background: #DC3522;
color: #D9CB9E;
padding: 10px;
}
iframe
{
border: 1px solid DarkSlateGray;
margin: 10px;
box-sizing: border-box;
width: 90%;
height: 300px;
}