mediaelement.js and Youtube video tracking

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.

Accepted Solutions (0)

Answers (0)