Hello I'm trying to make a very simple website consisting of a background image and a floating youtube video. My problem is that I need the youtube video to be on a specific place and resize to fill that determined space regardless of resolution or browser window.
The video needs to go in the dark area middle left; I'm not too sure what to do I haven't coded in a while. I've got the background to resize adequetly but other than that. I've tried to follow these guides.
http://css-tricks.com/fluid-width-youtube-videos/
I would appreciate any help. You can find the image here
http://i.stack.imgur.com/rkYos.jpg
Put the iframe into a div and position it absolute where you want
http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
make sure you set the z-index to a higher positive value to make it stay "on top"
See also https://stackoverflow.com/search?q=absolute+position+div
Related
To make it more simple, i'm working on this site https://webdev02.amontagnana.it/ and on the 4th row we can see a text block and an embedded video.
I need to make the video's height just like the block on the left. (it has to be relative too because it has to be responsive to desktop and mobile)
Your site are loading and loading
If you are cover an entire DIV . you need to fixed position and increase z-index as much as possible.
you can simply add a custom class on tatsu-column-inner and add the background color black on it
See the attached screenshort
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
I'm working on my first website and I've stumbled across a problem.
How do i make my main contentBox cover the subNav? Img Here
You can set the z-index property.
To get an image over another image:
Using CSS, absolutely position your image and set the top value to 0 for both images.
However, I am not sure you are asking the correct question as in your image, your content areas seem to be above the area you want them to be placed.
Also - are your web page areas all images?
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class
My question is related to HTML, and PURE html. I am working on a new design for my front page on a social network called kwick, and I want to create a kind of space for my favorite Video at the moment.
Now my problem is, how do I realize something like this:
I take a picture of my ipod like that(just an example, its not my ipod)
http://www.clein-online.de/schmuck_projekte/files/ipod_nano_schutzhuelle.jpg
Now I want to create this picture as gif and cut out the display, now behind that cutten out area, there should be a youtube video be shown, in a way that the embed player is NOT shown completely, i mean, the player is there completely, but the picture is a lay in on it.
How to do this?
You don't need to cut the image at all. Make a div that has enough space for the whole picture of the ipod and use CSS to make it the background image (can be inline styles if you can't add your own CSS files).
<div style="background:url(ipod.jpg); width:300px; height:400px;">
<iframe src="..." style="margin: 25px auto 0;" width: 250px; height: 200px;></iframe>
</div>
Apply margin, width and height to your iframe or embed or object to position it within the div that has the ipod background image.
You can set the iframe to the size you need and make it hide any overflow if necessary but I don't think you're going to be able to hide parts of the flash if you don't have control of the embed code.
Your biggest hurdle will be ensuring that your WMODE = transparent. Setting WMODE to transparent will keep your flash crap from always appearing on top of other content. Then, simply position an image with transparency in the correct place over the video.
Since you haven't included any information on how precisely you're including your flash file, I can't really tell you what method you'll need to use to set the WMODE. Just do some googling, and all will be clear.