HTML canvas resize effects iframe placement.

[stever49992187]

My question is... 

Is there a way to have the iframe say in place with an anchor point or have the iframe move correctly on the canvas when the canvas is resized? 

The code I am using is the following: 

root.embedVideo(embedURL, "video-popup", {position: 'absolute', left: (canvas.width - 170) * 0.5 + 'px', top: (canvas.height - 350) * 0.5 + 'px'});

I have attempted to use "relative" and "absolute" in the code with no luck. 

The issue is with the page is resizing, Any resizing outside of the canvas dimensions causes the iframe to get pushed to the lower right of the canvas. (image attached)

Thank you for your time. 

[ClayUUID]

The simplest approach is to wrap everything in an iframe, then use CSS transforms on it to resize its contents.

This is rather complicated and there isn't really a one-size-fits-all solution, unfortunately.

Do you really have to use an iframe to embed your video? Usually just a div is sufficient for this, unless you're embedding a YouTube video.

[stever49992187]

Hi ClayUUID, 

Thank you for the response. My objective is to display an ASP.NET, not a youtube video. I was testing the iframe as I was assuming that was the only way to do it. 

My goal is to have the character's body overlayed with buttons, once each portion of the body is clicked the .NET form will show and the user can then select data from the form and submit.

(example: click the head button--> form is displayed --> fill and submit the form -- > close form --> move to the next body part) 

is there an easier way to do this? 

(Sorry for the basic questions, but I am not a programmer. )

__________________________________________

THIS IS THE CODE I AM CURRENTLY USING: 

var root = this;
var videoURL = 'http:URL';
var embedURL = '<iframe width="430" height="350" src="http://URL" frameborder="0"></iframe>';

root.embedVideo = function(url, id, style)
{
var key;
var element = document.createElement('div');

canvas.parentNode.appendChild(element);
element.id = id;
element.innerHTML = url;

for (key in style)
element.style[key] = style[key];
};
// ...
root.embedVideo(embedURL, "video-popup", {position: 'absolute', left: (canvas.width - 150) * 0.5 + 'px', top: (canvas.height - 350) * 0.5 + 'px'});