Gday.
Yeah, you can do something like this. You just need to make use of some CSS, some inline styling and some javascript (to calculate the position - you could fix it instead)
Basically, the idea is to set the div to have an absolute position. You also want to ensure it appears in-front of the embedded object - giving it a higher z-index.(the default, if not specified is 0)
Here's some code that will position the div above the center of the embed object.
<!DOCTYPE html>
<head>
<script>
window.addEventListener('load', myInit, false);
function byId(e){return document.getElementById(e);}
function myInit()
{
var moveMe = byId('moveMe');
var coverMe = byId('coverMe');
var coverPosX,coverPosY;
var coverWidth, coverHeight;
var movePosX, movePosY;
var moveWidth, moveHeight;
coverPosX = coverMe.clientLeft;
coverPosY = coverMe.clientTop;
coverWidth = coverMe.clientWidth;
coverHeight = coverMe.clientHeight;
moveWidth = moveMe.clientWidth;
moveHeight = moveMe.clientHeight;
movePosX = (coverWidth - moveWidth) / 2;
movePosY = (coverHeight - moveHeight) / 2;
var tgt = moveMe;
tgt.style.left = movePosX + 'px';
tgt.style.top = movePosY + 'px';
}
</script>
<style type="text/css" media="screen">
.above
{
font-family: verdana;
position: absolute;
display: inline-block;
color: red;
font-weight: bold;
font-size: 12px;
padding: 24px;
border: solid 4px red;
background-color: rgba(51,51,51,0.3);
border-radius: 16px;
z-index: 1;
}
</style>
</head>
<body>
<embed id='coverMe' width="100%" height="300px" name="plugin" src="EstesRocketMotors.pdf" type="application/pdf">
<div class='above' id='moveMe'>Always seek permission from aviation<br>authority before exceeding 300ft flights</div>
</body>
</html>