YouTube Video API Event Playlist Background Image Tutorial
Our current project last talked about with YouTube Video API Event Playlist Shuffle and Loop Tutorial started as a …
- “proof of concept” one to allow for user testing of event.stopPropagation() Javascript event bubbling control usage … and yet, is also a …
- player of YouTube videos using the YouTube API inhouse interfacing here
… and it is the second functionality we want to emphasize. In such scenarios, we sometimes apply an apt Background Image (we’re applying to all document.body) via …
<style>
td { vertical-align: top; }
select { background-color: lightblue; }
option:not(:checked) { background-color: yellow; opacity: 0.5; }
textarea { background-color: #f0f0f0; }
body {
background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('/retro-music-concept-with-headphones-space.jpg');
background-size:cover;
background-repeat:no-repeat;
}
* { border-radius:10px; border-color:magenta; }
</style>
… and regarding /retro-music-concept-with-headphones-space.jpg we have Freepik to thank for the free headphones background image we found there and downloaded then uploaded into place.
While we’re talking styling another CSS measure we often use to change the aesthetics of a webpage look is to soften some squared off borders via the application of a border-radius.
The meta viewport tag came in handy for this project, as another layer, for mobile platforms, of allowing mobile gestures to genuinely improve the video viewing, for the user …
<meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes' >
Another matter with mobile usage and a personalized playlist play scenario was that the use of the Mute and Unmute checkboxes at the “grandparent” level did not amount to a real click at the “grandchild” level, and so we started involving Javascript confirm box querying of users here, and this satisfied as a real user click for mobile platform media play purposes.
Codewise, all of the “the three amigos”, at it again …
… got involved.
Previous relevant YouTube Video API Event Playlist Shuffle and Loop Tutorial is shown below.
YouTube Video API Event Playlist Shuffle and Loop Tutorial
We left our Song Playing web application in YouTube Video API Event Playlist Save and Recall Tutorial …
- on mobile, needing a lot of “user tap maintenance” to keep the “personalized playlist” (consisting of YouTube ID video) music rolling … hence our …
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
… from a preceeding tutorial … well … we still allow that mode of use, but add to that, the possibility of …
- on mobile or non-mobile, we now offer the referencing of …
- YouTube Playlist IDs (34 characters) … or …
- Spotify Playlist IDs (22 characters)
… so that shuffling and, in the case of YouTube Playlists using the YouTube App (if on mobile), looping can be part of the mix in your Song Plays (now appearing in the web application title … doh!! … yay!!!!)
The way to access this new functionality, above, is via the “now always appearing” 🍪 ( 🍪 Cookie button ) new prompt window arrangement …
var xname='';
if (('' + location.hash).replace(/^\#/g,'') != '') {
xname=prompt('Recall name for this playlist. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Spaces at front results in a request to us at RJM Programming to host your proposed playlist on our YouTube channel and we will return a 34 character ID you can use yourself in the textbox presented. Add spaces at end also to just attend to that email off to RJM Programming.', '');
} else {
xname=prompt('Please optionally enter a recallable YouTube (34) or Spotify (22) playlist ID we will save for you from here on in optionally suffixed by # hashtag separated playlist title. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Our supplied YouTube playlist ID example is Nala and Luna (mainly) but please use Cancel to avoid remembering this playlist into the future.', 'PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE#Nala and Luna');
if (xname != null) { if (eval('' + xname.indexOf('#')) > 0) { btoaname=encodeURIComponent(xname.split('#')[1].replace(/\ /g,'_')); xname=xname.split('#')[0]; } usethisnotlh=xname; }
}
… that is possible when no personalized playlist hashtag data is in the mix. If it is, well, that opens another whole story all the way through to allowing the user to (email) request the creation of their personalized list of YouTube video IDs becoming a public facing YouTube Playlist hosted on the RJM Programming YouTube Channel, whereby we moderate, here, and if all passes muster, we return a 34 character YouTube Playlist ID the user can save from then on as a playlist on mobile or non-mobile capable of shuffling and looping (if the YouTube App is invoked, on mobile).
We’ve allowed those YouTube search results to “linger longer” too, by replicating them at the “grandparent level” at the point of time we wipe them from the “parent level”, the latest set appearing just below those top three options we now have going for both non-mobile and mobile platforms.
Codewise, two of the “the three amigos” were at it again …
Previous relevant YouTube Video API Event Playlist Save and Recall Tutorial is shown below.
YouTube Video API Event Playlist Save and Recall Tutorial
Meanwhile, back at the wishlist, with our recent YouTube API interfacing web application project …
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
… it is the olive ideas we’ve made a start on today. We say “we’ve made a start on” only because, when it comes to programming, it doesn’t pay to close off alternate ideas as you go about looking for solutions. Take “Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)” (for some reason we’re nicknaming “innerHTML” … who wrote this script) …
… well, yes, that would be nice, but, more to the point, we started involving top.document.title in solution making but then, along the way, started incorporating just plain and simple Javascript get/set functionality …
var ajaxs_ih='';
function get_ajaxs_ih() {
return ajaxs_ih;
}
function set_ajaxs_ih(wht) {
ajaxs_ih=wht;
}
… parent.get_ajaxs_ih() and parent.set_ajaxs_ih(strIn) references from the “parent” level referencing the “grandparent” level (of code above) and being able to populate those YouTube search dropdowns more efficiently. This get/set paradigm is “a classic” methodology in a lot of OOP work, further to the recent YouTube Video API Event Radio Play Sharing Tutorial.
Codewise, again, “the three amigos” were at it again …
Previous relevant YouTube Video API Event Radio Play Sharing Tutorial is shown below.
YouTube Video API Event Radio Play Sharing Tutorial
Wishful thinking with today’s tasklist regarding our current YouTube Video API Event Radio Play Idea Tutorial YouTube API interfacing web application project, where the blue ideas were started …
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
… further to yesterday’s YouTube Video API Event Radio Play Idea Tutorial …
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
Of interest, here, might be the “emoji means” and top.document.title means by which we tackle the Mute and unmute dynamically issue. Why use top.document.title here? Well, a grandchild of the grandparent is best placed to …
… meaning that all the grandparent has to do, effectively “broadcasting” to any “grandchildren YouTube video players”, is “the emoji flagging work” and adjusting (what it knows as) document.title to perform this functionality for the two new input type=checkboxes (appended by an empty span element and nested in a span id=smute element) we add into the HTML design mix via onchange event function Javascript …
function domute(thiscbo) {
if (thiscbo.checked) {
thiscbo.style.backgroundColor='yellow';
document.getElementById('cbunmute').style.backgroundColor='white';
document.getElementById('smute').innerHTML=document.getElementById('smute').innerHTML.replace('>Mute' + document.getElementById('smute').innerHTML.split('>Mute')[1].split('<')[0] + '<', '>Mute ' + '✔<').replace('>Unmute' + document.getElementById('smute').innerHTML.split('>Unmute')[1].split('<')[0] + '<', '>Unmute<');
if (document.title.indexOf('volume:') != -1) {
var rest='volume:' + document.title.split('volume:')[1];
document.title=document.title.replace(rest, rest.replace(document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'mute'));
} else {
thiscbo.style.backgroundColor='white';
document.title+=' volume:mute';
}
thiscbo.checked=false;
}
}
function dounmute(thiscbo) {
if (thiscbo.checked) {
thiscbo.style.backgroundColor='yellow';
document.getElementById('cbmute').style.backgroundColor='white';
document.getElementById('smute').innerHTML=document.getElementById('smute').innerHTML.replace('>Unmute' + document.getElementById('smute').innerHTML.split('>Unmute')[1].split('<')[0] + '<', '>Unmute ' + '✔<').replace('>Mute' + document.getElementById('smute').innerHTML.split('>Mute')[1].split('<')[0] + '<', '>Mute<');
if (document.title.indexOf('volume:') != -1) {
var rest='volume:' + document.title.split('volume:')[1];
document.title=document.title.replace(rest, rest.replace(document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'unmute'));
} else {
thiscbo.style.backgroundColor='white';
document.title+=' volume:unmute';
}
thiscbo.checked=false;
}
}
It is this complex because (we found out) input type=checkbox CSS styling, as a subject, is a “bit of a closed book” matter!
Codewise, also regarding email and SMS (radio) playlist sharing functionality, amongst other changes, involved …
Previous relevant YouTube Video API Event Stop Propagation Idea Tutorial is shown below.
YouTube Video API Event Stop Propagation Idea Tutorial
We’re back using the YouTube API video playing themes of YouTube Video API Interfacer Audio Play Tutorial as a means to setting up a web application that may help explain …
event.stopPropagation();
… Javascript event control of it’s “bubbling” (up through an element hierarchy), in other words, depending where you place this, stopping it’s “bubbling up” at that element concerned …
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().
We find, around here, we don’t know we’ve created a need for event.stopPropagation() usage until we’ve stumbled onto it, most of the time, so trying to get in ahead of it with today’s proof of concept to event.stopPropagation() or not to event.stopPropagation() web application feels a bit novel to us, in a good way.
This means by which to toggle that mode of use was more straightforward than “data control” with our musical YouTube API video functionality allowing a user to choose and slot in their own video ideas via either …
- YouTube video ID … 11 characters long … or …
- search string to try to select a video, via a programmatically populated dropdown, with an 11 character long YouTube video ID
… asking us to do a fair bit of tweaking to our inhouse interfacing …
… you might want to try out, yourself, to see what we’re getting at here, below …
Previous relevant YouTube Video API Interfacer Audio Play Tutorial is shown below.
YouTube Video API Interfacer Audio Play Tutorial
The recent Making Of Earth Scanner Legs Tutorial set us to thinking about how to offer a toggling arrangement between our inhouse YouTube Embedded Iframe API playing of …
- video … with an incarnation of this that plays …
- audio … “sort of” only (but able to be toggled back to video playing)
… and it got us wondering how to “dull out” a video. We chose the CSS …
<style>
iframe { filter: invert(45%); }
</style>
If you want a “complete dull out” try filter: invert(50%); … but we wanted to see controls down the bottom, still useful for audio only playing.
You can try this all out in the changed karaoke_youtube_api.htm inhouse YouTube video interfacer.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
