Container doesn't resize if YouTube API has already been loaded

[taylortom]

Container doesn't resize if YouTube API has already been loaded, ending up in a vertically cropped video.

Code-wise, we get an early return and the relevant initialisation doesn't occur.

adapt-youtube/js/YouTubeView.js

Line 25 in b2e7876

if (window.onYouTubeIframeAPIReady !== undefined) return;

Example use-case: Adapt embedded in a page which had already loaded the API via another script (in this case Google tag manager). In this case, it means the code returns early, as window.onYouTubeIframeAPIReady is already defined. We've fixed this by forcibly changing the logic in the above code to check for Adapt.youTubeIframeAPIReady, rather than window.onYouTubeIframeAPIReady !== undefined, however this has the potential to cause issues with whatever code loaded the API originally.

Your environment

• FW v5.51.2
• adapt-youtube v3.3.0

Steps to reproduce

Load component in a page that has already loaded the API.

Expected behaviour

Component should resize to contain the full video.

Actual behaviour

Video will be cropped.

[oliverfoster]

It looks like the code in question only needs to happen once per course:

adapt-youtube/js/YouTubeView.js

Lines 25 to 31 in b2e7876

	if (window.onYouTubeIframeAPIReady !== undefined) return;
	window.onYouTubeIframeAPIReady = () => {
	logging.info('YouTube iframe API loaded');
	Adapt.youTubeIframeAPIReady = true;
	Adapt.trigger('youTubeIframeAPIReady');
	};
	$.getScript('//www.youtube.com/iframe_api');

The function's name and location are irrelevant, as long as it is not called twice. Updated below
It should not be in the View initialise function. If you change it could you please move it back to the main file?

[taylortom]

Looks like the onYouTubeIframeAPIReady function is called internally by the YouTube script, so the naming's necessary in this case unfortunately.

[oliverfoster]

https://developers.google.com/youtube/iframe_api_reference

Yeahs, you're right.

It still needs to be:

 window.onYouTubeIframeAPIReady = () => { 
   logging.info('YouTube iframe API loaded'); 
   Adapt.youTubeIframeAPIReady = true; 
   Adapt.trigger('youTubeIframeAPIReady'); 
 }; 
 $.getScript('//www.youtube.com/iframe_api'); 

And the return early can change:

adapt-youtube/js/YouTubeView.js

Line 25 in b2e7876

if (window.onYouTubeIframeAPIReady !== undefined) return;

to

if (Adapt.youTubeIframeAPIReady) return;

[oliverfoster]

If the youtube api function onYouTubeIframeAPIReady has already been set by another system in the same JavaScript context, you might be able to monkey-punch it to get both to work, assuming the function is set before Adapt gets there.

const originalOnYouTubeIframeAPIReady  = window.onYouTubeIframeAPIReady;
window.onYouTubeIframeAPIReady = () => { 
   originalOnYouTubeIframeAPIReady?.();
   logging.info('YouTube iframe API loaded'); 
   Adapt.youTubeIframeAPIReady = true; 
   Adapt.trigger('youTubeIframeAPIReady'); 
 };