Eddy Eddy - 1 year ago 56
CSS Question

How can I unload video when it has finished playing?

I am trying to unload a video when it has finished playing. No luck so far. Can anyone help please? JSFIDDLE example here


Answer Source

I have included the solution at jsfiddle and in this snippet below. Note that I used .toggle() instead of .unload(), since .unload() is meant to be fired on window event :


$('#videoButton').on('click', function() {
  var videoDiv = $('#videoDiv').toggle();

  if (videoDiv.is(':visible')) {
  } else {

$(document).ready(function() {
  $('#video').on('ended', function() {
#videoDiv {
  width: 100%;
  height: 360px;
  position: relative;
#videoMessage {
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 0;
.videoClick {
  text-align: center
.videoClick a {
  color: white;
  background-color: rgba(241, 241, 241, 0.25);
  font-size: 1.7em;
  cursor: pointer;
  cursor: hand
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="videoButton">Toggle video</button>
<div id="videoDiv" style="display:none">
  <div id="videoBlock">
    <video preload="preload" id="video">
      <source src="https://static.webshopapp.com/shops/054833/files/093143183/fotel-photography-course-tour-workshop-video-4.mp4" type="video/mp4">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download