Responsive YouTube embed with text - html

Question

To begin with - I'm CSS / HTML beginner so something that might be obvious for you - for me is just not :) Would really appreciate your help.
I'm having a problem regarding positioning of the text on responsive YouTube embed.
What I'm trying to accomplish is:
responsive Youtube video that scales well for all resolutions - it works well
text should be placed on top of the Youtube embed - right now it disappears in back
text should be position in the same place in relation to video embed (for all the resolutions) - in my final example text should be placed on right, approx 25% up from the bottom end of the Youtube embed
I want to have access to Youtube embed controls (e.g. pausing on click and so on) so any layer covering youtube embed won't be OK
I would prefer a solution of html/css (without any additional js)
Source that I have is the following:
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>
If some of you guys would be able to help with text positioning, I'd really appreciate

Answer 1

Your attempt is super close. We just need to position the .text element absolutely and use some right and bottom properties to align it. In the example below I've used:
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
I've also changed the .text color to white so it's visible, but this could be changed depending on the colors in the video.
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>