Let me preface this by saying that I realize my coding practises for this particular project are sub-standard... I have been rushing to complete this project (a favor), and will fix this later.
I have a Wordpress site for my girlfriend (http://fashiondahlia.com), and I am using the Youtube data API to load/display videos from her youtube channel when the user clicks the "Videos" link from the menubar at the top. Once the link is clicked, I have PHP and JQuery code load and display a semi-transparent DIV on the current page, with the currently playing video (and some data relevant to it) displayed on the left of this div, and the rest of the videos displayed on the right. This brings me to my problem:
I am having issues stacking 3 divs on top of one another (in the left pane of the video DIV) so that they don't overlap one-another, fill the entire space of their parent DIV, and resize according to device/browser size (while maintaining the youtube video's aspect ratio); One div contains the video title of the current selected video, another contains the actual iframe/embeded video from youtube, and the bottom one contains the description for the currently playing video.
This is the code that I currently have for creating the whole ensemble in it's entirety (including the current video pane, and the list of other videos): http://pastebin.com/dGNxpftC
...And these are the CSS styles that are being used to maintain the aspect ratio of the youtube video embeded in the page: http://pastebin.com/1Zmm5MpQ
I know that my code is a mess with all the in-line CSS, and I will be addressing this issue once I have completed the project.
So, it seems pretty obvious that the CSS styles being used to maintain the videos aspect ratio are impacting the "description" div below it (overflowing onto the description), but I can't seem to figure out how to have the youtube video maintain its size ratio, while still playing nicely with the div below it. The title div is not really an issue, as it is a fixed height.
Basically, I want the TITLE DIV to have a fixed height, the VIDEO DIV to resize with the page (while maintaining it's aspect ratio), and the DESCRIPTION DIV on the bottom to fill the remaining area of the parent DIV (also resizing dynamically). Can this be done? Please help! Thank you!
