JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<BODY style="background:transparent">
	<div style="position:relative; z-index:0;">
		<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
			<param name="wmode" value="transparent"></param>
			<embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed> 
		</object>
		
		<object>
			<param name="wmode" value="transparent"></param>
			<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
			<param name="allowFullScreen" value="true"></param>
			<param name="allowscriptaccess" value="always"></param>
			<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
		</object>
	</div>	
    
    <div id="draggable">
		<div class="drag">
			<p>Drag me around!! Drag me around!!</p>
            <p>Drag me around!! Drag me around!!</p>
            <p>Drag me around!! Drag me around!!</p>
		</div>
		<iframe class="frame"></iframe>
	</div>
</BODY>                                            
</HTML>

CSS

.note_style{
    width: 300px;
    font-size: 50px;
    font-family: Lucida Grande, Helvetica, sans-serif;
    z-index: 1;
    position: absolute;
    top: 5px;
    left: 50px;
    background-color: lightgray;    
}

.drag{
    position: absolute; 
    z-index: 1; 
    height: 60px; 
    background-color: gray;
}

.frame{
    height: 100%; 
    opacity:0; 
    z-index:0;
}

JavaScript

$( "#draggable" ).draggable();