Video moves position in html 5 doc
Hi
I have created a html5 animation in Animate which contains video. When I play the exported html file it's fine but as soon as I paste the code into my page, the animated part works fine but video jumps further up the page. Please can you provide some advice as to what I'm doing wrong? Let me know if I need to provide more info. thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Company Name</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" > <!--required for different devices-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/aclonica:n4:default.js" type="text/javascript"></script>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="v18.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("5CEE574201CB7444A14D826AE01E1F99");
var lib=comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib=comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images=comp.getImages();
if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )
}
exportRoot = new lib.v18();
stage = new lib.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
makeResponsive(false,'both',false,1);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body class="body" onload="init();" style="margin:0px;">
<!--indent to help your code be more identifiable-->
<header class="mainHeader">
<img src="images/logo.png">
<!--navigation-->
<nav><ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="pirates.html">Pirates</a></li>
<li><a href="gamehistory.html">Game History</a></li>
<li><a href="ourgames.html">Our Games</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="wheretobuy.html">Where to Buy</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></nav>
</header>
<!--main content area-->
<div class="mainContent">
<div class="content">
<article class="topContent">
<h1>Header</h1>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis iaculis nisi. Proin accumsan ultricies turpis, ac rutrum velit mollis vitae. Donec hendrerit eu ipsum et laoreet. Pellentesque mattis egestas aliquam. </p>
<p>
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:600px; height:365px">
<canvas id="canvas" width="600" height="365" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:600px; height:365px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</p>
</content>
</article> <!—top Content end-->
</div> <!—article end-->
</div><!—main content end-->
<!--side content to go here-->
<aside class="top-sidebar"> <!--given different classes for different styling-->
<article><img src="images/facebook.jpg" width="35" height="35" alt=""/>
<img src="images/twitter.jpg" width="35" height="35" alt=""/>
<img src="images/pintrest.jpg" width="35" height="35" alt=""/>
<img src="images/linkedin.jpg" width="35" height="35" alt=""/>
</article>
</aside>
<aside class="middle-sidebar"> <!--given different classes for different styling-->
<article>
<h2>Top Side Bar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis iaculis nisi. Proin accumsan ultricies turpis.</p>
</article>
</aside>
<!--footer-->
<footer class="mainFooter">
<p> Copyright © 2018 <a href="#" title="Responsive"> Name of Company Here </a> </p>
</footer>
</body>
</html>
AdChoices