Hi there,

I got your email with video background a few months ago and it looks really amazing.
Now I’m following the tutorial from Kevin Mandeville and I think I coded it on the way he explained in the tut but somehow I have 2 issues..
1. The overlay content won’t view.
2. At the bottom I have a space with the fall back background image.

Are you guys able to have a look and explain what I’m doing wrong...
I really appreciate your help.

Your guys are doing a great job!

Kind regards,

Sebastian Groenendaal
RocketWay

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Video Background Test</title>

<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }

.ReadMsgBody
{width: 100%; background-color: #ffffff;}
.ExternalClass
{width: 100%; background-color: #ffffff;}
body
{background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
html
{width: 100%;}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
 div[class="video-wrap"]{
 height: 750px;
 position: relative;
 overflow: hidden;
 padding:0;
 margin:0;}
 }

 @media screen and (-webkit-min-device-pixel-ratio: 0) {
video[class="video"]{
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
display:inline-block !important;}
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
div[class="overlay"]{
height: 100%;
min-height: 100%;
position: relative;
margin: 0 auto;
padding: 0 20px;
z-index:3;}
}

/* iPAD MEDIA QUERY */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPAD 1 & 2, iPAD MINI MEDIA QUERY */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
video[class="video"]{display: none !important;z-index:-1;}
}

/* RETINA iPAD MEDIA QUERY */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 5 MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 1){
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 5S MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2){
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 2G/3G/3GS MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1){
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 4/4S MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
video[class="video"]{display: none !important;z-index:-1;}
}

/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 600px */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
div[class="video-wrap"]{
height: 570px !important;}
}

/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 480px*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 480px) {
div[class="video-wrap"]{
height: 440px !important;}
video[class="video"]{
top:-75px;
left:-200px;}
}

</style>

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#f2ae44" width="100%">
    <tr>
        <td align="center" bgcolor="#f2ae44" style="padding: 0 0 50px 0; background-color: #f2ae44; background: url(http://pages.litmus.com/l/31032/2014-04-17/2hs7p/31032/17346/video_bg.jpg) top center no-repeat;background-size: cover;" width="100%">


            <div class="video-wrap">

                <video autoplay="autoplay"loop="loop" class="video" style="display: none;">
                <source src="https://litmus.com/videos/TEDC-short-clips-tinted-compressed.mp4" type="video/mp4">

                    <div class="overlay">

                        <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —>
                        <table border="0" cellpadding="0" cellspacing="0" width="600">
                            <tr>
                                <td style="text-align: center; font-size: 100px; color: #303030;">
                                    TEST
                                </td>
                            </tr>
                        </table>


                    </div>

                </video>

            </div>

        </td>
    </tr>
</table>