Highlighted

HTML canvas resize effects iframe placement.

New Here ,
Mar 02, 2020

Copy link to clipboard

Copied

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. 

 

1.jpg

TOPICS
Code

Views

82

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML canvas resize effects iframe placement.

New Here ,
Mar 02, 2020

Copy link to clipboard

Copied

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. 

 

1.jpg

TOPICS
Code

Views

83

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 02, 2020 0
Adobe Community Professional ,
Mar 02, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 02, 2020 0
New Here ,
Mar 03, 2020

Copy link to clipboard

Copied

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'});

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2020 0