Tabular Single Row YouTube Audio or Video Gallery Tutorial

Tabular Single Row YouTube Audio or Video Gallery Tutorial

Today we’ve connected …

• yesterday’s Tabular Single Row Image Gallery Primer Tutorial Image Gallery ideas with …
• our “Brady Bunch” YouTube iframe arrangement peer to peer suite (eg. The Wrecking Crew)

… which now have three new functionality options …

• <–> … link to align the (previously) “Brady Bunch” YouTube iframes into a single row in the same web browser tab
• <–>^A+V … call of yesterday’s Media Gallery web application playing our “inhouse” YouTube iframe video playing web application in a new web browser tab
• <–>_A-V … link to our “inhouse” audio stream only YouTube iframe playing functionality in a new web browser tab

… involving changes to …

• our changed …
  
var ytlist='';

if (('' + document.URL + ('' + location.hash)).indexOf('onerow=') != -1) {
setTimeout(function(){
var inis='';
var iwis=document.getElementById('vplayer1').getBoundingClientRect().width;
var ifsare=document.getElementsByTagName('iframe');
for (var jtt=0; jtt<ifsare.length; jtt++) {
//alert(ifsare[jtt].src);
if (ifsare[jtt].src.indexOf('/embed/') != -1) {
if (ytlist == '') {
ytlist='' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
} else {
ytlist+=',' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
}
}
ifsare[jtt].style.width='' + iwis + 'px';
}
var toho=document.getElementsByTagName('table')[0];
var tih=toho.innerHTML;
var newtih=tih;
//alert(tih);
var thingos=tih.split('<tr');
for (var itt=3; itt>=1; itt--) {
if (itt == 1) {
inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
newtih=newtih.replace(inis, inis.replace('</tr>','<!--/tr-->'));
} else if (itt == 3) {
inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
newtih=newtih.replace(inis, inis.replace('<tr>','<!--tr-->'));
} else {
inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
newtih=newtih.replace(inis, inis.replace('<tr>','<!--tr-->').replace('</tr>','<!--/tr-->'));
}
}
toho.innerHTML=newtih;
toho.style.width='1000%';
}, 4000);
}

setTimeout(function(){
var antwo='';
if (ytlist == '') {
var ifsare=document.getElementsByTagName('iframe');
for (var jtt=0; jtt<ifsare.length; jtt++) {
//alert(ifsare[jtt].src);
if (ifsare[jtt].src.indexOf('/embed/') != -1) {
if (ytlist == '') {
ytlist='' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
} else {
ytlist+=',' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
}
}
}
}
if (ytlist != '') {
antwo+=' <a title="Audio and video plays of YouTube videos" target=_blank href="/HTMLCSS/swipe_media.html?youtube=' + encodeURIComponent(ytlist) + '"><--><sup>A+V</sup></a>';
antwo+=' <a title="Audio only plays of YouTube videos" target=_blank href="/HTMLCSS/swipe_media.html?audioyoutube=' + encodeURIComponent(ytlist) + '"><--><sub>A-V</sub></a>';
}
if (document.URL.indexOf('?') != -1) {
document.getElementById('wshuffle').innerHTML+=' <a title="Present in one table row" target=_self href="' + document.URL.replace('?', '?onerow=' + Math.floor(Math.random() * 1989786)) + '"><--></a>' + antwo + ' ';
} else {
document.getElementById('wshuffle').innerHTML+=' <a title="Present in one table row" target=_self href="' + document.URL + '?onerow=' + Math.floor(Math.random() * 1989786) + '"><--></a>' + antwo + ' ';
}
}, 9000);

  … youtube_brady_bunch.js being used in our inhouse Disco web application “peer to peer suite” web application “grandparent” level example …
• “second draft” swipe_media.html Tabular Single Row Image Gallery web application

Previous relevant Tabular Single Row Image Gallery Primer Tutorial is shown below.

Tabular Single Row Image Gallery Primer Tutorial

“Tabular Single Row Image Gallery” …

Smabular Single Row Image Gallery

… we’re sure is the reaction of some readers out there, to today’s “starting draft” for an idea we had. Today’s part of the jigsaw we want to explore may be “ho hum” and “so non-mobile”, but we’re hoping the thread appeals to more modern ideas as we go along.

So much for the apologies, and so let’s now look at the basis to this start …

• media (so far just image) …
• gallery … presented in …
• table … HTML element … in …
• single tr row
• deliberately overflowing to the right of the screen view of the webpage … and so …
• scrollable (ie. window scrollable) to … those right hand parts …
• only “media loaded” …
• as “scrolled to” or “stumbled upon”

So far the window scrollable detection goes (thanks to this useful link) …


window.onscroll = function (e) {
// called when the window is scrolled.
vspos4=document.body.scrollTop;
vspos3=document.body.scrollLeft;
var vstdn=Math.ceil(eval('' + vspos3) / eval('' + amin));
if (curtdn != vstdn) {
checkthen(vstdn);
}
}


… and the CSS produced “wording (ie. non-media) content” is produced down the bottom left of “inhouse WordPress Blog image cell background” ( possible because of background-size:contain ) we think is interesting …


<style>
td {
border: 1px dotted green;
}

.inhouse {
vertical-align: bottom;
padding-bottom: 20px;
}

.inhouse::after {
content: 'Media Gallery \a RJM Programming \a August, 2025 \a Thanks to Lorem Picsum at https://picsum.photos/ \a ' attr(alt);
white-space: pre-wrap;
}
</style>


… in a “first draft” Tabular Single Row Image Gallery web application for your perusal. Thanks to Lorem Picsum regarding, as so often happens for us, when we’d like beautiful random images to be involved with web applications!

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.