VIDEO’EX » WebTekNeq’s

VIDEO’EX » WebTekNeq’s.

I do not feel well and my energy is ebbing…

green-smilie-with-thermometer

I still wanted to post something and this is a quickie. Since I have started working on the SEO presentation again I have also been going back over the primary site and doing a bit of tidying and the video example page needed to be revised into columns. I have reviewed a number of methods for accomplishing this but they were complex enough that I wanted to wait until I feel better or until I begin a full theme build in another week or two before trying them and attempting to incorporate any.

What I came up with is a very simple method that did not require me to alter any theme functions or include additional JavaScript or CSS rules. I had seen a couple of examples that hinted at this but never actually hit on it and this I am sure will not work for more than three columns and possibly only two as I am now using… but it does work. In a nutshell I wrapped all of the iframes inside of a single “div style” element and gave it an attribute of “position relative” then each iframe received a “p style” element with attribute of “float right” or “float left” depending on where it needs to be.

The relative positioning allows all of the iframe components to recognize the position of its neighbor… the floating attribute allows for each to seek vertical positioning without the use of JavaScript or additional CSS rules and writing these as styling attributes can be done directly on the page without changing additional files. Its quick and dirty but effective… I need to make each iframe fluid to resize along with viewport size changes and I need to make sure that it behaves as expected under all conditions… with a little tweak here and there it just might make for a fundamental quick fix?

I will go into detail about how all of this interacts and more when I step through theme building… soon…

wishing-hoping-praying-smilie

CODE SAMPLE

<div style=”position: relative”>

<p style=”float: left;”><iframe src=”http://www.youtube.com/embed/XXX-XXXlist=XXX-XXX” height=”320″ width=”450″ allowfullscreen=”" frameborder=”0″></iframe></p>

<p style=”float: right;”><iframe src=”http://www.youtube.com/embed/XXX-XXXlist=XXX-XXX” height=”320″ width=”450″ allowfullscreen=”" frameborder=”0″></iframe></p>

</div>

Leave a Reply


%d bloggers like this: