user linked script call …
<script type='text/javascript' src='//www.rjmprogramming.com.au/ytaudioonly.js'></script>
… helping out …
HTML “a” link with class=audioytplay and a mention of https://www.youtube.com/watch?v=[YouTubeID] … eg.
<p>Oops, <a class="audioytplay" target="_blank" title="?" href='https://www.youtube.com/watch?v=gBzJGckMYO4' rel="noopener"><strike>that's all</strike>sorry, folks</a></p>
to be, via onclick event, playing “in place” the audio part of that YouTube referenced [YouTubeID] video
Developing this is definitely more than a one day job (especially getting mobile platforms working), but today’s “first draft” ytaudioonly.js external Javascript, along with the help of …
Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial
As far as CSS styling goes with our web application work, personally speaking, it is one of …
Give it a bit of oompha!
… moments in coding we think we learn more from, than reading about CSS. That, and, usually StackOverflow, thanks, where examples of achieving some styling ambition teach us a lot too.
Yesterday, with Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial, we decided to “put a bit of oompha” into that “two bell emoji” ( ie. 🔔🔔 ) link “double buzzer” sound “production number”, and wanted to break down what we ended up with, for readers …
Our first try … okay for non-mobile … not as good for mobile …
Why can’t we just link to a YouTubevideo URL webpage off any old platform or web browser incarnation?
Well, you could! But we wanted a less obvious approach (and we were not sure about mobile platforms, trying this), only relevant for scenarios where you are only interested in the audio stream of a YouTube video (it should be noted), that is hiding from the reader “the mechanics” of what we are doing (to get a cheap giggle … there, are you happy now?!).
What does Javascript if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { } if test achieve?
If this test returns true we have detected a non-mobile platform/web browser scenario.
What does the HTML target attribute of an a HTML element do?
That target attribute determines the “navigational place” of the href attribute URL of that a link where …
_blank opens in a new window
_self clobbers current window
_top adds a new (tabbed) window (perhaps from the viewpoint of a child HTML iframe window)
other named target point to the name attribute of an HTML iframe element, presumably, in the current window
What does HTML code snippet onload=”if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf(‘About_Us.’) != -1) { document.getElementById(‘aja’).target=’myja’;
this.src=document.getElementById(‘aja’).href + ‘&rand=’ + Math.floor(Math.random() * 1989786); } } “ do as the onload event logic of the “second version” iframe incarnation?
it is arranged from the child iframe inhouse YouTube video interfacing player web application using “overlay” concepts …
position: absolute
opacity
z-index
top and left positioning
width and height dimensioning
🔔🔔 into some button content
… that what they are tapping is a YouTube video element
looking like 🔔🔔 at levels of a smaller z-index seen through opacity:0.0 higher z-index levels, the topmost transparent but high z-index one being the YouTube video element which is that webpage area’s “action item” … if you will
Huh?!
On mobile platforms, media cannot play, these days, unless it is as a direct result of a user tap (excluding programmatically produced taps). See all this in action, with thanks to FreeConvert, below …
And so, yes … was it worth it? Perhaps not to do with the job at hand, but for future reference, we’re happy to give this added oompha to this effort.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.