My interactive self portrait for the Live Web class can be found here.

First things first: since my first touch to coding happened last semester and I haven’t used JavaScript outside of p5.js, I spent all weekend going through JavaScript and HTML tutorials on Codecademy.

The idea of self portrait is simple: as people click the button on the page, videos multiply and create sort of the grid. I used HTML5 video tag to make that happen.

I first tried to push new videos into html table tag, but with no success used document.createElement in JavaScript to create additional videos. This leads my to questions while writing the code:

  1. Is there any way to push more videos while having only <video> tag in html?
  2. How can I stop videos showing up after three rows are filled? I first tried a for loop for the number of clicks, then style.visibility = “hidden” but neither of them seemed to work.
  3. I also can’t seem to be able to remove the space in between first and second video, as well as first and second rows. What’s the deal with that?
  4.  Once I load the page from scratch I see this table pop:

Screen Shot 2016-02-02 at 11.57.39

What is the way to stop that from showing up?

Leave a Reply

Your email address will not be published. Required fields are marked *