OC-1441 Detach step elements from DOM or stop playback of closed steps

[jbzdak]

This is initial implementation of OC-1441, this stops playback of videos from previous steps.

Course set up

What you need is a course where on a step you have a video, and then you can to the next step (you should still hear the video on that next step --- which is the error).

1. Create a course with two sections, each containing a single subsection and a single unit.
2. Each unit contains a step-builder with three steps. First step contains a video and a question, second contains a question, and the last one is the review step.
3. In one of the subsections use a normal Video XBlock, in second use HTML with OOyala player (OOyala set-up is described in the OC-1441 issue).

Essentially you should have a course that looks like this:

* Section 1
 * Subsection 1
   * Unit 1
    * Step Builder
     * Step 1
      * Video XBlock with a video
      * Question 
    * Step 2 
     * Question
    * Step 3
     * Review
* Section 2
 * Subsection 2
   * Unit 1
    * Step Builder
     * Step 1
      * HTML Xblock with OOyala video
      * Question 
    * Step 2 
     * Question
    * Step 3
     * Review

Verification instructions

1. Download the course attached to OC-1441 (for anyone from outside OpenCraft: this course just contains two StepBuilder units containing first step with a video, then step with a quiz and then step with a review; first block contains an Youtube video loaded using a Video XBlock, and second one contains an OOlaya video embedded using HTML Xblock).
2. Please note that OOyala video needs to be manually started by pasting a snippet to a javascript console --- snippet is attached above the video, and looks like that: OO.ready(function() { OO.Player.create('xxx', 'yyy_zzz'); });. After you start the video it should work as it was started "normally" so tests are still valid.
3. Go to video and block, start the video and wait until it loads, fill in the quiz and go to next step. Note that you still hear video music in the background.
4. Check the same with the OOyala video subsection.

Testing instructions

1. Checkout this branch.
2. Go to video and block, start the video and wait until it loads, fill in the quiz and go to next step. Note that the video is no longer playing in the background.
3. Fill in rest of the quiz, watch the review step, and go back to the video step. Verify that video is still working properly.
4. Check the same with the OOyala video subsection.

[jbzdak]

There is a dangling ) on the end of comment.

[itsjeyd]

@jbzdak Leftover ")"

[jbzdak]

@itsjeyd All review comments have been addressed (fixes should be visible on both PRs).

[itsjeyd]

@jbzdak 👍 if YouTube issues can be ignored for now.

Also, we'll need to decide which approach we want to go with (this one or the one from #114) before merging.

[jbzdak]

I'm closing this one, I will post a follow up shortly.