Help on adding HTML to my site

I am trying to add custom HTML to my site and it is only showing the grey box with a sad face. What I am trying to upload is 3D rotating images of my products. Any advice on why this isn’t working would be great.
Heres the code I am trying to paste it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="https://www.w3.org/1999/xhtml"> 
<head> 
<meta https-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=0.5" /> 
<title>Yogurt</title> 
<script language="javascript" type="text/javascript"> 
//<![CDATA[ 
/* 
This is the VR Photo Web Player 
To create your own VR Photos, get the VR Photo App for iOS from the Apple App Store 
© 2011-2015 Thomas Möller 
For more information go to www.moellersoft.de 
v1.1 

To use multiple VR Photos on one page, each one needs the following line with the name and number of images. */ 
var vrp_Yogurt = {imageName:"Yogurt_",imagecount:16, actualImage:1}; 
//Also see further instructions below after the body tag. 

//Do not change the following line 
dragDistance=20;var startX;var activeImage;function initVRPhoto(preImageName,preImageCount){var preImages=new Array();for (i=2; i <=preImageCount; i++){preImages[i]=new Image(); preImages[i].src=eval(preImageName).imageName + i +".jpg";}document.getElementById(preImageName).addEventListener("touchstart", touchStart, false);}function mouseDown(event){ev=event || window.event;if (! window.event){event.preventDefault();}else{window.event.returnValue=false;}var mousePos=mouseCoords(ev);startX=mousePos.x;document.onmouseup=mouseUp;document.onmousemove=mouseMove;activeImage=event.target.id;return false;}function mouseMove(event){ev=event || window.event;var mousePos=mouseCoords(ev);var leftDelta=mousePos.x - startX;if (Math.abs(leftDelta) >=dragDistance){startX=mousePos.x;if (leftDelta < 0){eval(activeImage).actualImage +=1;if (eval(activeImage).actualImage > eval(activeImage).imagecount){eval(activeImage).actualImage=1;}}if (leftDelta > 0){eval(activeImage).actualImage -=1;if (eval(activeImage).actualImage==0){eval(activeImage).actualImage=eval(activeImage).imagecount;}}}document.getElementById(activeImage).src=eval(activeImage).imageName+eval(activeImage).actualImage+".jpg";return false;}function mouseCoords(ev){if(ev.pageX || ev.pageY){return{x:ev.pageX, y:ev.pageY};}return{x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}function mouseUp(event){document.onmousemove=null;activeImage="";return false;}function touchStart(event){activeImage=event.target.id;touchTarget=event.target;if(event.touches.length==1){event.preventDefault();startX=event.touches[0].pageX; touchTarget.addEventListener("touchmove", touchMove, false); touchTarget.addEventListener("touchend", touchEnd, false);}}function touchMove(event){if(event.touches.length==1){event.preventDefault();var leftDelta=event.touches[0].pageX - startX;if (Math.abs(leftDelta) >=dragDistance){startX=event.touches[0].pageX;if (leftDelta < 0){eval(activeImage).actualImage +=1;if (eval(activeImage).actualImage > eval(activeImage).imagecount){eval(activeImage).actualImage=1;}}if (leftDelta > 0){eval(activeImage).actualImage -=1;if (eval(activeImage).actualImage==0){eval(activeImage).actualImage=eval(activeImage).imagecount;}}}document.getElementById(activeImage).src=eval(activeImage).imageName+eval(activeImage).actualImage+".jpg";}}function touchEnd(event){touchTarget=event.target; touchTarget.removeEventListener("touchmove", touchMove, false); touchTarget.removeEventListener("touchend", touchEnd, false); activeImage="";} 
//]]> 
</script> 
<style type="text/css"> 
body { 
	font-family: Verdana, Geneva, sans-serif; 
	font-size: 8pt; 
	color: #333; 
	text-align:center; 
	margin:0; 
	padding:0; 
} 
a:link { 
    color:#79BE3A; 
	text-decoration: none; 
} 
a:visited { 
    color:#79BE3A; 
	text-decoration: none; 
} 
</style> 
</head> 
<body> 
<!-- To use multiple VR Photos on one page copy the following div area from here ... --> 
<div class="vrphotocontainer"> 
<img class="vrphoto" id="vrp_Yogurt" style="-apple-dashboard-region: dashboard-region(control rectangle 20px 20px 20px 20px);" onmousedown="mouseDown(event)" src="Yogurt_1.jpg" alt="Yogurt" /> 
<!-- To remove the text delete the following line and also the two lines before the closing script tag below--> 
<br/><span id="infotext">&lt;- Swipe on the image or drag it with the mouse -&gt;<br/>- Made with VR Photo for iOS - </span><a href="https://www.moellersoft.de" title="VR Photo Developer Site" target="_blank">www.moellersoft.de</a> 
</div> 
<!-- ... to here --> 
<script language="javascript" type="text/javascript"> 
//<![CDATA[ 
// also include the next line for each VR Photo 
initVRPhoto('vrp_Yogurt',16); 
//The following line is just for translating the infotext to german language. If you remove the infotext, also remove this line to avoid javascript errors. 
var txt = "&lt;- Wischen Sie &uuml;ber das Bild oder ziehen Sie es mit der Maus -&gt;<br/>- Erstellt mit VR Photo f&uuml;r iOS - ";if (navigator.language.indexOf("de") > -1) {document.getElementById("infotext").innerHTML=txt;} 
//]]> 
</script> 
</body> 
</html>

Heres the image I get on the html box:

I am having the same problem! I have tried deleting all extensions in my browser, as well as updating Chrome, but nothing seems to be working. Did you find any solutions?