View Full Version : Remove Video <div> - onended

03-21-2012, 03:36 PM
Hello there,
I am new to javascript. I would like to remove the div containing a video, by javascript, on the 'onended' event, but am not sure how to do this yet.
Here is my code so far:

<body onload="javascript:showDiv()">
<div class="fullscreen" id="fullscreen">
<video autoplay="autoplay" >
<source src="stage.mp4" type="video/mp4" />
<source src="stage.webm" type="video/webm" />

function hideDiv() {
if (document.getElementById) {
document.getElementById('fullscreen').style.visibility = 'hidden';
function showDiv() {
if (document.getElementById) {
document.getElementById('fullscreen').style.visibility = 'visible';

var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
document.write("<font color=\"white\">Work???</font>");

I expected the text 'Work???' to be executed after the onended function carries out. However the video is not removed...
Thanks in anticipation to your answers..

03-21-2012, 04:06 PM
Generally you cannot use document.write() to alter elements on your current document. After page load it will always(!) create a new document and overwrite the existing one, including the Javascript code that called it.

Alternatives: element.innerHTML, document.createElement('TAGNAME'), parent.appendChild(element), parent.insertBefore(element, otherelement), document.createTextNode("This is a text node")