Put a text on fullscreen video (HTML5)
You can embed responsively with Youtube and vimeo with iframes, and with Viddler and Blip.tv with object embed. There is an article that explains it here and code is available on github
Sample code for Youtube (using jquery):
// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
Had this problem before but it's pretty simple code in the end (it still took me ages to figure out and get the right balance) https://jsfiddle.net/tonytansley/xwuuttdt/
Just a little absolute positioning and using percentages as your widths heights and paddings.
<body>
<div id="outer">
<div id="home-top-video">
<video autoplay loop width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4"/>
<source src="http://view.vzaar.com/2710053.ogg" type="video/ogg"/>
<source src="http://view.vzaar.com/2710053.webm" type="video/webm"/>
Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="home-text">
<h1>text</h1>
<h3>subtext</h3>
</div>
</div>
</div>
</body>
css
#outer{
width:100%;
display:block;
text-align:center;
position:relative;
overflow: hidden;
height:10000px;
min-height:100%;
}
#home-top-video{
left:0%;
top:0%;
height:100%;
width:100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#home-text{
left:0%;
top:0;
height:100%;
width:100%;
padding-top:10%;
overflow: hidden;
position: absolute;
z-index: 0;
color:white
}