Call a function on page load Javascript

I have a simple responsive site built with Twitter bootstrap.

I have a video sitting in a modal that is called and auto plays on the click of a button.

I want to call my function on page load instead of on a button click.

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" 
data-theVideo="https://www.youtube.com/embed/44H1gmn9tBA">VIDEO</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <div>
                <iframe width="100%" height="350" src=""></iframe>
            </div>
        </div>
    </div>
</div>

and the .js

<script type="text/javascript">
  autoPlayYouTubeModal();
function autoPlayYouTubeModal() {
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function () {
      var theModal = $(this).data("target"),
          videoSRC = $(this).attr("data-theVideo"),
          videoSRCauto = videoSRC + "?autoplay=1";
      $(theModal + ' iframe').attr('src', videoSRCauto);
      $(theModal + ' button.close').click(function () {
          $(theModal + ' iframe').attr('src', videoSRC);
      });
      $('.modal').click(function () {
          $(theModal + ' iframe').attr('src', videoSRC);
      });
  });
  }
</script>

Everything above works as intended but I have been trying to do this (Below) in order to call the autoplay function on page load.

<script>
$("document").ready(function(){

$("#videoModal").trigger("click");
});
</script>

When I paste the video modal.trigger function into the console it returns the modal but the modal and video never launch.

Appreciate any help.