get div value in Javascript

get div value in Javascript

need to convert the div´s content into iframe, it worked on the test but
when i take it to the page im havin the error : "cannot set property
'innerHTML' of null".
the HTML :
<input name="videoFrame1" type="hidden" value="http://vimeo.com/68476945">
<div id="videoFrame1">http://vimeo.com/68476945</div>
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("videoFrame1").innerHTML =
createIFrame("http://vimeo.com/68476945", 500, 281);
});
function createIFrame(url, width, height) {
switch (url.substring(7, 12)) {
case "www.y":
return
url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,
'<iframe width="' + width + '" height="' + height + '"
src="http://www.youtube.com/embed/$1" frameborder="0"
allowfullscreen></iframe>');
break;
case "youtu":
return
url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,
'<iframe width="' + width + '" height="' + height + '"
src="http://www.youtube.com/embed/$1" frameborder="0"
allowfullscreen></iframe>');
break;
case "vimeo":
return
url.replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(?:\/\?)?(.+)/g,
'<iframe width="' + width + '" height="' + height + '"
src="http://player.vimeo.com/video/$1" frameborder="0"
allowfullscreen></iframe>');
break;
}
}
</script>