Embedding YouTube Videos in Oracle Policy Modeling

I recently have been chatting to the wonderful Sue Novak. If you don’t know Sue, she is a Senior Technical Writer that looks after Oracle Intelligent Advisor. If you’ve ever been on the Forum or dealt with the documentation then you probably have met Sue. We were chatting about the changes to the way that YouTube videos can be embedded into web pages (and thus, into Oracle Policy Modeling interviews).

The basic upshot is that you need to use the YouTube Iframe API. This API is asynchronous and once it is loaded you can then use the API methods to play, pause, stop and otherwise do things to your video. It offers a good deal of control over the display and behaviour.

The only other thing that you have to take into account is the Debugger. It won’t like the way the API does things with the DOM in Internet Explorer 11. So you can add code to make sure that the video doesn’t play in the Debugger – and perhaps leave a message to say that you need to open the interview using Ctrl+F5 to see it in your real browser, or deploy it to be able to to play it. One final tweak – Chrome will not autoplay the YouTube video unless it is muted – so we do that too. Here is a simple example:

OraclePolicyAutomation.AddExtension({
	customLabel: function (control, interview) {
		if (control.getProperty("name") == "Video1") {
			return {
				mount: function (el) {
					is_IE11 = isIE11();
					if (!is_IE11) {
						//Build the DIV which will be grabbed by the API
						var div = document.createElement("div");
						div.id = "player";
						div.style.visibility = 'visible';
						div.style.height = '500px';
						div.style.width = '870px';
						el.appendChild(div);
						// Call the API and load it
						var script_tag_addition = document.createElement('script');
						script_tag_addition.setAttribute('src', 'https://www.youtube.com/iframe_api');
						var firstScriptTag = document.getElementsByTagName('script')[0];
						firstScriptTag.parentNode.insertBefore(script_tag_addition, firstScriptTag);
						
						var player;
					} else {
						// Display a message and let the user continue
						var div = document.createElement("div");
						div.id = "noplayer";
						div.style.visibility = 'visible';
						div.style.height = '200px';
						div.style.width = '700px';
						div.innerHTML = '<b>Unsupported Browser!</b> This video will not display in this Debug mode browser. 
View in Ctrl+F5 with your default browser eg. Chrome, Firefox, Safari, and Edge.';
						
						el.appendChild(div);
					}
				
			},
			update: function (el) {},
			unmount: function (el) {
				if (control.getProperty("name") == "player") {
					//    console.log("Starting name:xVideo customLabel UnMount");
					var xVideo = document.getElementById("player");
					xVideo.parentNode.removeChild(xVideo);
					//   console.log("Ending name:xVideo customLabel UnMount");
				}
			}
		}
	}
}
	})
	function onYouTubeIframeAPIReady() {
		window.YT.ready(function () {
			player = new window.YT.Player("player", {
					height: "390",
					width: "640",
					videoId: "STCgGTMsHl0",
					events: {
						onReady: onPlayerReady
					},
					playerVars: {
						'mute': 1
					}
				});
		});
	}
function onPlayerReady(event) {
			event.target.playVideo();
	}
	let isIE11 = (function () {
		let isIE11 = !!window.MSInputMethodContext && !!document.documentMode,
		ua = window.navigator.userAgent;
		if (ua.indexOf("AppleWebKit") > 0) {
			return false;
		} else if (ua.indexOf("Lunascape") > 0) {
			return false;
		} else if (ua.indexOf("Sleipnir") > 0) {
			return false;
		}
		array = /(msie|rv:?)\s?([\d\.]+)/.exec(ua);
		version = (array) ? array[2] : '';
		return (version === "11.0") ? true : false;
	});

The result is something like the effect you can see in this YouTube video (below) and the screenshot here.

YouTube embed example

Hope it is useful and helps you embed more YouTube in your interviews.

video
play-sharp-fill

This is the second example of how to get video into Oracle Policy Modeling interviews, and if you don’t need YouTube then check out the other example here, which uses a modern HTML5 video tag to embed a video sitting on a server (but not YouTube).

video
play-sharp-fill

Between these two examples you should be able to fill your interviews with useful content. Sometimes video really is the best option for getting your message across.

More articles about Extensions:

Author: Richard Napier

After 8 years in case management and ERP software roles, Richard Napier joined Siebel Systems in 1999 and took up the role of managing the nascent Siebel University in Southern Europe. He subsequently was Director of Business Development and Education for InFact Group (now part of Business & Decisions) for 8 years. He now runs Intelligent Advisor IT Consulting OÜ. Owner of intelligent-advisor.com, he also is Co-Founder of the Siebel Hub.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Intelligent Advisor IT Consulting Serving Customers Worldwide
Hide picture