VideoContainer

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen</title>
    <style type="text/css">
        body {
            background-color:green;
        }
        .vWrapper {
            position:absolute;
            top:0;bottom:0;right:0;left:0;
            max-height:100%;
            max-width:100%;
            border:20px solid rgba(255, 255, 255, 0.5); /* modifici transparenta inlocuind .5 cu o valoare intre 0 si 1 */
            display: none;
        }

        .vInner {
            width:100%;
            height:100%;
            background-color: red;
        }

        .vClose{
            padding-top:10px;
            padding-right:10px;
            position: absolute;
            right:0;
            border:0 none;
        }

        .video {
            width:100%;
            height:100%;
            float:left;
        }

    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".showVideo").on("click", function(){
                var idVideo = $(this).data("idvideo");
                $("#v" + idVideo).fadeIn();
            })

            $(".closeVideo").on("click", function(){
                $(this).parents().find(".vWrapper").fadeOut();
            })

        });
    </script>
</head>
<body>
    <button data-idvideo="1" class="showVideo">Video 1</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
    <div id="v1" class="vWrapper">
        <div class="vInner">
            <div class="vClose"><button class="closeVideo">x</button></div>
            <div class="video"><iframe style="width:100%;height:100%;" src="http://www.youtube.com/embed/xvDTAHJy3r4" frameborder="0"></iframe></div>
        </div>
    </div>
</body>
</html>