Video em Tela inteira

by cintia_rodrigues

HTML

<div class="video-wrpp">
    <div class="container">
       *colocar uma imagem com o play e quando se toca o video aparece
        <img src="~/Content/Images/player.jpg" id="fakePlayer" />
        Colocar uma div para chamar o video para este aparecer enquanto a img aparece
        <div id="youtubeVideo"></div>        
    </div>

</div>

CSS

.video-wrpp {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-color: black;
    text-align: center;
}

#fakePlayer {
    cursor: pointer;
    max-width: 100%;
}

#video-promo {
    width: 100%;
}

#youtubeVideo {
    display: none;
}

JavaScript

/*Choose Number of Children*/
$(".jq_radioOption").click(function () {
    $('.jq_option').hide();

    var button = $(this);
    var option = button.attr("data-option");

    $("#" + option).prop('checked', true);
    button.removeClass("btn-mask").addClass("btn-mask-checked");

    $(".jq_radiowrapper").find("input:radio").each(function () {
        if (!$(this).is(":checked"))
            $("input[data-option=" + $(this).attr("id") + "]").removeClass("btn-mask-checked").addClass("btn-mask");
    });

    var childrenNumber = $("#" + option).attr("data-val");
    $("#ChildrenNumber").val($("#" + option).val());

    for (var i = 1; i <= 6; i++) {
        if (i <= +childrenNumber)
            $('.jq_option' + i).show();
        else
            $('#AgeChild' + i).val("");
    }

    //hide error message
    $("span[data-valmsg-for=ChildrenNumber]").removeClass("field-validation-error").addClass("field-validation-valid").html("");

});