{"id":68718,"date":"2025-06-18T03:01:00","date_gmt":"2025-06-17T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68718"},"modified":"2025-06-21T11:43:45","modified_gmt":"2025-06-21T01:43:45","slug":"tabular-layout-right-hand-iframe-left-overlaying-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/tabular-layout-right-hand-iframe-left-overlaying-tutorial\/","title":{"rendered":"Tabular Layout Right Hand Iframe Left Overlaying Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/at_right_leaning_left.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Tabular Layout Right Hand Iframe Left Overlaying Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/at_right_leaning_left.gif\" title=\"Tabular Layout Right Hand Iframe Left Overlaying Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Tabular Layout Right Hand Iframe Left Overlaying Tutorial<\/p><\/div>\n<p>It&#8217;s probably around about the timing of <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/select-multiple-webpage-palette-speech-bubble-youtube-one-click-tutorial\/' title='Select Multiple Webpage Palette Speech Bubble YouTube One Click Tutorial' rel=\"noopener\">Select Multiple Webpage Palette Speech Bubble YouTube One Click Tutorial<\/a> for a scenario that goes &#8230;<\/p>\n<ul>\n<li>for mobile platforms &#8230;<\/li>\n<li>for a tabular webpage arrangement (at the grandparent level) &#8230;<\/li>\n<li>with a left and right hand table cell &#8230;<\/li>\n<li>the left having an <i>area wider than it is high (and not that high)<\/i> &#8230;<\/li>\n<li>over which you&#8217;d want to, above it, float an invisible <a target=\"_blank\" title=\"YouTube\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video &#8230; hosted in &#8230;<\/li>\n<li>right hand cell &#8230; containing &#8230;<\/li>\n<li>inhouse supervisory YouTube playing iframe (at parent level) &#8230; in turn hosting &#8230;<\/li>\n<li>inhouse YouTube Embedded API Iframe coded <strong>iframe (at grandchild level)<\/strong><\/li>\n<\/ul>\n<p> &#8230; we wondered whether all this could be as arranged above, but that <strong>iframe (at grandchild level)<\/strong> could be &#8220;persuaded&#8221;, invisibly, to overlay that <i>area wider than it is high (and not that high)<\/i> to allow for a &#8230;<\/p>\n<blockquote><p>\nmobile &#8220;one click&#8221; scenario to play the audio stream of that YouTube video (to the right)\n<\/p><\/blockquote>\n<p> &#8230; on that day, especially, because the day before our success with the ways we&#8217;d achieved this before, had not been so good for mobile testing &#8230; and later we think that was because the YouTube ID we&#8217;d been testing with is now not legitimate on mobile platforms &#8230; but that&#8217;s another story &#8230; 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 &#8220;proof of concept&#8221; web application, involving <strong>iframe (at grandchild level)<\/strong> and a <i>parent tabular arrangement<\/i>, that we have for you today, and it proved, at least to us &#8230;<\/p>\n<table>\n<tr>\n<th>Idea<\/th>\n<th>Did it work?<\/th>\n<th>Comment<\/th>\n<\/tr>\n<tr>\n<td><strong>iframe (at grandchild level)<\/strong> gets negative CSS margin-left property<\/td>\n<td>No<\/td>\n<td>No matter what we did regarding CSS overflow-x and various CSS z-index arrangements left hand parts of <strong>iframe (at grandchild level)<\/strong> were truncated<\/td>\n<\/tr>\n<tr>\n<td><strong>iframe (at grandchild level)<\/strong> gets negative CSS left property<\/td>\n<td>No<\/td>\n<td>No matter what we did regarding CSS overflow-x and various CSS z-index arrangements left hand parts of <strong>iframe (at grandchild level)<\/strong> were truncated<\/td>\n<\/tr>\n<tr>\n<td><strong>iframe (at grandchild level)<\/strong> gets negative CSS margin-left property and CSS position to absolute and CSS z-index very big<\/td>\n<td>Yes<\/td>\n<td>Event logics could be passed back to the top level hoster to put border over relevant left or right underlying cell<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; but this is not earth shattering news, really, though we could make it invisible over the top of an <i>area wider than it is high (and not that high)<\/i> too this way.  But we &#8220;dreamed&#8221; one of the other two <i>might<\/i> work &#8230; alas, no.<\/p>\n<p>Anyway, ruling things out can help into the future, maybe?!   Try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/at_right_leaning_left.html_GETME\" rel=\"noopener\">this first draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/at_right_leaning_left.html\" rel=\"noopener\">at_right_leaning_left.html testing web application<\/a> helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------------------------------------GETME\" rel=\"noopener\">the reworked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> <!--button onclick=\"document.getElementById('ifdiv').innerHTML='<iframe src=\/HTMLCSS\/at_right_leaning_left.html style=width:100%;height:900px;><\/iframe>';\">below<\/button-->.<\/p>\n<div id=ifdiv><\/div>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d68718' onclick='var dv=document.getElementById(\"d68718\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68718' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s probably around about the timing of Select Multiple Webpage Palette Speech Bubble YouTube One Click Tutorial for a scenario that goes &#8230; for mobile platforms &#8230; for a tabular webpage arrangement (at the grandparent level) &#8230; with a left &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tabular-layout-right-hand-iframe-left-overlaying-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2824,161,281,354,400,576,587,652,3272,1943,861,1919,2219,1661,871,3267,2723,876,894,1988,997,1986,1238,1581,3907,3536,1253,1319,1402,1496],"class_list":["post-68718","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute","tag-border","tag-css","tag-dom","tag-event","tag-html","tag-iframe","tag-javascript","tag-left","tag-margin-left","tag-onclick","tag-onmousedown","tag-onmousemove","tag-onmouseout","tag-onmouseover","tag-ontouchdown","tag-ontouchmove","tag-opacity","tag-overlay","tag-position","tag-programming","tag-proof-of-concept","tag-table","tag-table-cell","tag-td","tag-test","tag-testing","tag-tutorial","tag-web-application","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68718"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=68718"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68718\/revisions"}],"predecessor-version":[{"id":68774,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68718\/revisions\/68774"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=68718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=68718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=68718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}