Sticky Video-Image on page.md

Sticky Video

This function allows you to make a video/image/text sticky on the page, so that it displays at all times, even when the participants scroll down. The demo function below is for adding a YouTube video using an iframe, but innerHTML can be modified to anything.

Link to Working Demo
Hold down Ctrl or ⌘ Cmd to open the link in a new tab

Screenshot:

Question Javascript:

Qualtrics.SurveyEngine.addOnload(function () {
	let base_element = document.querySelector(".SkinInner");
	base_element.insertAdjacentHTML(
		"afterbegin",
		'<div id="sticky_vid" style="position: sticky; top:0;" align="middle">'
	);
	let new_element = document.querySelector("#sticky_vid");
	// Change the text below to add the element of your choice
	new_element.innerHTML = `<iframe width="560" height="315" style="position: relative" src="https://www.youtube.com/embed/OsmYQl3xy_Y" frameborder="0"></iframe>`;

	// This is important, otherwise, the element you add will be at the back
	base_element.style.zIndex = 1;
	new_element.style.zIndex = 10;
});