Spoiler

by Евгений

HTML

<div class="spoiler-video">
	<div class="spoiler-button">youtube.com</div>
	<div class="spoiler-frame">
	    <iframe width="480" height="360" src="//www.youtube.com/embed/os00JDq_rKk" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
<div class="spoiler-video">
	<div class="spoiler-button">rutube.ru</div>
	<div class="spoiler-frame">
	    <iframe width="720" height="405" src="http://rutube.ru/video/embed/1860239" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
	</div>
</div>
<div class="spoiler-video">
	<div class="spoiler-button">myvi.ru</div>
	<div class="spoiler-frame">
	    <object style="height: 390px; width: 640px"><param name="movie" value="http://myvi.ru/player/flash/oyqtvkkBBGJw7C_U4czq3bVhSQXWgpPzEjRtUA8jWELwXueRt6MVhBY-G6Zg1TEjM0"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://myvi.ru/player/flash/oyqtvkkBBGJw7C_U4czq3bVhSQXWgpPzEjRtUA8jWELwXueRt6MVhBY-G6Zg1TEjM0" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object>
	</div>
</div>
<div class="spoiler-video">
	<div class="spoiler-button">sibnet.ru</div>
	<div class="spoiler-frame">
		<iframe width="640" scrolling="no" height="384" frameborder="0" allowfullscreen="" src="http://video.sibnet.ru/shell.php?videoid=1278914"></iframe>
	</div>
</div>
<div class="spoiler-video">
	<div class="spoiler-button">vk.com</div>
	<div class="spoiler-frame"></div>
</div>

CSS

.spoiler-button {
font-size: 14px;
font-weight: bold;
background: #FFCA32;
text-shadow: 0 1px 0 #FFE73F;
border: 1px solid #F4A460;
box-shadow: 0 1px 0 rgba(255,255,255,0.4);
text-align: center;
max-height: 300px;
padding: 5px;
cursor: pointer;
}

.spoiler-frame {
text-align: center;
display: block;
}
.tohide {
    display: inline;
}
.spoiler-video .tovis {
    display: inline;
}
.spoiler-video .spoiler-frame, .spoiler-video .tohide, .tovis {
    display: none;
}

JavaScript

$('.spoiler-button').each(function () {
    $(this).html('<span class="tohide">[\&ndash;]</span><span class="tovis">[+]</span> ' + $(this).html())
}).click(function () {
	$(this).parent().toggleClass( 'spoiler-video' );
})