[SugarCube 2] Integrating YouTube video through JS

Hello there!

First post here, be nice please
I'm totally new at Twine, finished my first simple story a few days ago and beginning to work on a bigger project.
To be honest, I'm not familiar with javascript at all...
For information, I'm using Sugarcube 2.

So I'm trying to integration a youtube video in a passage via javascript and the youtube api (so I can control the player externally).
I'm using a widget macro to create the iframe but I have a problem. I want to be able to set the passage name as the videoId (see code). But I'm facing two different problems: either I use a <script></script> tag and the youtube api works fine but the State.variables object doesn't, or I use <<script>> macro and the youtube code doesn't give me anything...

Here the code:

<<widget "video">>
<<set $videoid to passage()>>
<<script>>
var tag = document.createElement('script');
tag.src = "htps://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var videoID = State.variables.videoid;
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('gameplayer', {
	width: '1600',
	height: '900',
	playerVars: {
		'autoplay': 1,
		'controls': 0,
		'disablekb': 0,
		'enablejsapi': 1,
		'iv_load_policy': 3,
		'fs': 0,
		'modestbranding': 1,
		'rel': 0,
		'showinfo': 0
	},
	videoId: videoID
 	});
}
<</script>>
<</widget>>

(The iframe api url is not correct (htps) became the forum displays a weird thing if I leave https.)
The passage name being for example M7lc1UVf-VE
I'm very new to JS and Twine, my problem might not actually be one but I can't figure it out...