YouTube Video API Event Stop Propagation Idea Tutorial

YouTube Video API Event Stop Propagation Idea Tutorial

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

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.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *