Tabular Layout Right Hand Iframe Left Overlaying Tutorial
It’s probably around about the timing of Select Multiple Webpage Palette Speech Bubble YouTube One Click Tutorial for a scenario that goes …
- for mobile platforms …
- for a tabular webpage arrangement (at the grandparent level) …
- with a left and right hand table cell …
- the left having an area wider than it is high (and not that high) …
- over which you’d want to, above it, float an invisible YouTube video … hosted in …
- right hand cell … containing …
- inhouse supervisory YouTube playing iframe (at parent level) … in turn hosting …
- inhouse YouTube Embedded API Iframe coded iframe (at grandchild level)
… we wondered whether all this could be as arranged above, but that iframe (at grandchild level) could be “persuaded”, invisibly, to overlay that area wider than it is high (and not that high) to allow for a …
mobile “one click” scenario to play the audio stream of that YouTube video (to the right)
… on that day, especially, because the day before our success with the ways we’d achieved this before, had not been so good for mobile testing … and later we think that was because the YouTube ID we’d been testing with is now not legitimate on mobile platforms … but that’s another story … as is that we got all this to work a few days later. Be that as it may, we wanted to write a whole new “proof of concept” web application, involving iframe (at grandchild level) and a parent tabular arrangemnent, that we have for you today, and it proved, at least to us …
| Idea | Did it work? | Comment |
|---|---|---|
| iframe (at grandchild level) gets negative CSS margin-left property | No | No matter what we did regarding CSS overflow-x and various CSS z-index arrangements left hand parts of iframe (at grandchild level) were truncated |
| iframe (at grandchild level) gets negative CSS left property | No | No matter what we did regarding CSS overflow-x and various CSS z-index arrangements left hand parts of iframe (at grandchild level) were truncated |
| iframe (at grandchild level) gets negative CSS margin-left property and CSS position to absolute and CSS z-index very big | Yes | Event logics could be passed back to the top level hoster to put border over relevant left or right underlying cell |
… but this is not earth shattering news, really, though we could make it invisible over the top of an area wider than it is high (and not that high) too this way. But we “dreamed” one of the other two might work … alas, no.
Anyway, ruling things out can help into the future, maybe?! Try this first draft at_right_leaning_left.html testing web application helped out by the reworked stop_start_youtube.html inhouse YouTube API interfacer .
If this was interesting you may be interested in this too.
