Using html5 canvas as a background, how to position a youtube embed on top of it using css to be resolution independent?


Tags: javascript,css,html5,canvas,youtube

Problem :

I am having some issues placing an embedded youtube video on top of an html5 canvas.

You can see an example of my issue at eternalminerals.com , where I am trying to using the matrix canvas as the background with the Youtube video ontop

On certain computers, it looks fine, but I guess on other resolutions the video get's shifted.

I am simply using

element.style {
  position: relative;
  top: -800px;
}

on the embeded youtube, but is there a better way so that it would be resolution independent?

Thank you so much!



Solution :

Use

positition : absolute;

then set it you wherever you want it to be. That should work.

Then add this:

element.style{
 position:absolute; 
left:0;
 right:0;
 margin-left:auto; 
margin-right:auto
; }

    CSS Howto..

    How to center an element horizontally and vertically?

    How to add a tooltip for just the background image of an input field with HTML and CSS

    how to position heading in the center of the page

    How to append bind-attr class to initial one in Ember?

    CSS - How to hide extra images

    How to apply background color with css to text with line break [duplicate]

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    How can I insert dynamic text into a div with absolute position?

    How to change the input field's text color in MaterializeCSS?

    How to resize all div images to a particular size?

    How to position one element relative to a separate element in CSS

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to change css from javascripts

    How to create dynamic CSS based on user input

    How do I output compressed CSS from Compass?

    How to use CSS timing functions to animate an arc?

    How to center align text over CSS shape?

    CSS: How to define a centered div with endless vertical borders and an initial height of 100%?

    background image not showing on nested

    how to make css tooltip not push elements outline in FF

    How to add non-literal into a variable like jQuery?

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    How to reverse a CSS3 hover transformation?

    How to change color of Bootstrap warning class table row

    Jquery Mobile dynamic thumbnail list-How to create a border?

    How do I arrange this in CSS?

    How to reference this line in CSS, HTML

    How do I get rid of this blue halo around the close dialog button with jqueryui?

    How to adapt CSS image container to different browser sizes

    How to change drop-down menu to drop-up menu