mediaelement.js and Youtube video tracking

[ChrisWallis]

Wondering if anyone else has had to deal with Youtube videos embedded via mediaelement.js?

I used the script from the documentation which works for generic video tracking, i.e. when the YT video is manually embedded on the page.

However some of the videos on my client's site are added using the mediaelement.js library. No matter what I do, the Tealium script is not working in this case. It's strange, as the tracking works in their old GTM implementation with minimal custom development.

Here is the structure of the code on page:

<mediaelementwrapper id="mejs_7307003376069776">
	<div id="mejs_7307003376069776-iframe-overlay" class="mejs-iframe-overlay"></div>
	<iframe id="mejs_7307003376069776_youtube_iframe" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/[Video]?controls=0&amp;rel=0&amp;disablekb=1&amp;showinfo=0&amp;modestbranding=0&amp;html5=1&amp;iv_load_policy=3&amp;autoplay=0&amp;end=0&amp;loop=0&amp;playsinline=0&amp;start=0&amp;nocookie=false&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fcardiff_staging.studygroup.com&amp;widgetid=1" width="390" height="219.375"></iframe>
	<video style="width: 100%; height: 100%; display: none;" preload="none" poster="" id="mejs_7307003376069776_from_mejs" src="https://www.youtube.com/watch?v=iQA_KOYooyg">
		<source type="video/youtube" src="//www.youtube.com/watch?v=[Video]">
			<object type="application/x-shockwave-flash" data="/-/media/base-themes/core-libraries/other/flashmediaelement.swf">
				<param name="movie" value="/-/media/base-themes/core-libraries/other/flashmediaelement.swf">
				<param name="flashvars" value="controls=true&amp;poster=&amp;file=">
			</object>
		</video>
	</mediaelementwrapper>

And the source code. Mediaelement is evidently adding the iframe itself, and the Tealium script is not picking this up: 

<div class="sxa-video-wrapper">
    <video style="width: 100%; height: 100%;" preload="none"  poster="">
            <source type="video/youtube" src="//www.youtube.com/watch?v=[Video]" />
        <object type="application/x-shockwave-flash" data="/-/media/base-themes/core-libraries/other/flashmediaelement.swf">
            <param name="movie" value="/-/media/base-themes/core-libraries/other/flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&amp;poster=&amp;file=" />
        </object>
    </video>
    <div class="video-init"></div>
</div>

I've got a bespoke solution in mind using the below code and video state objects within it, but don't want to pursue that if there is no need:

$('*[id*="from_mejs"]')[0].player

can return video length and state, among other things, so I can pass utag.loinks based on that.

[dsavvy · Accepted solution]

Hi I am not sure what kind of access you have to the mediaelement, or how it works as an iFrame, such as the pause and play etc..
I was on the media elements website and designed a very quick play pause capture.

document.addEventListener('click', function (e) {
   console.log(e.path[0].ariaLabel)
  var stateOfPlay = e.path[0].ariaLabel;
if(stateOfPlay = "Play")
{
//mejs.players["mep_0"].getCurrentTime()
//just capture all the details from the mejs.players object and map it to the datalayer push everytime you do a click such as play, pause, seek
  console.log("trigger datalayer push herehere")

}

}, false);