I am trying to clean up my html code by not being repetative using jquery. I have 4 videos I want to embed on my portfolio page. I have created 2 arrays, one that stores the video names (vidName) and one that stores the video source (vidSrc). I tried using .each() along with .concat() to iterate through both arrays and .append() them to the html. The videos displayed like I wanted in the DOM, but it also displayed 4 other vid windows underneath that are blank. I am fairly new to code so there is probably an easy solution to get rid of the blank windows, I just can’t wrap my head around it. I also have 6 thumbnails I want to do something similar with, however I will have 3 arrays to work with for those (1 for name, 1 for href, and 1 for image source). I haven’t tried to tackle the thumbnail problem yet, I am hoping the solution to my first problem will help with those.
Here is the code I have used for the videos:
(note: I have the width and height of the iframe set in the real code file, I had to condense to get everything important in the screen shot)
Any help would be greatly appreciated