jQuery - Show Div1 on Div2 Click, then Hide Div1 on Document Click

I have a simple problem. I'm trying to display a video when the user clicks a div. Then when the user clicks anywhere on the page that isn't on the video, hide that video. Done millions of times but I can't find how to do it and other partial solutions on Stackoverflow failed. Here is the full code:

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- CSS -->
<style>#videoDiv{display:none;}</style>

<!-- jQuery -->
<script>
$(function(){
    $(".clickForVideo").click(function(){
        $("#videoDiv").show();
    });
    $(document).click(function(event){
        if ($('#videoDiv').is(':visible')) {    
        /*  tried replacing above line with this line according to stackoverflow - also failed
        if(!$(event.target).closest('#videodiv').length) {  */
            $('#videoDiv').hide(); <!--Reference 1-->
        }
    });
});
</script></head>

<!-- HTML -->
<body>
<div id="videoDiv"><iframe src="https://www.youtube.com/embed/S28Zux62a_0">
</iframe></div>
<div class="clickForVideo">Click me to show video</div>
</body></html>

When I click on the ".clickForVideo" div, no video appears. If I comment out the line labeled "Reference 1" then click ".clickForVideo" the video/div appears, however, doesn't disappear upon clicking document as intended. How would I either change my code or provide different solution for this problem. Thanks a lot. Andrew