I'm trying to embed an Youtube video inside a Div, but the video appears outside the Div.
I'm using a library called mb YTPlayer to do that.
My website demo:
I would like to put the video inside the div with red background.
My code:
CSS:
.screen{
background-image: url('img/window.png');
width: 950px;
height:390px;
margin:auto;
}
.videoprom{
padding-top:91px;
padding-left:5px;
}
.videoprom span{
display:block;
width:940px;
height:390px;
background-color:red;
}
My HTML:
<div class="screen">
<div class="videoprom">
<span class="test">
<a id="video" class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=vLUNWYt3q1w',containment:'.test',autoplay:true, mute:true, startAt:015, stopAt:110, opacity:5}"></a></span>
</div>
</div>
How can I fix that? Thanks.
Add a relative positioning to the div to fit into the container and then adjust the padding or margin.
.screen {
background-image: url("img/window.png");
height: 390px;
margin: auto;
position: relative;
width: 950px;
}
#wrapper_mbYTP_video {
margin-top: 90px;
}
Output:
Related
I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.
Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)
As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.
[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png
MY HTML SO FAR
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ?
(works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
Any idea how I could manage to get this in a more logical way?
Any suggestions would be gladly appreciated. Thanks!
I'd wrap the anchor in a div to center it. That way you could style
anchor separately with px while maintaining its position relative to the img.
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
If you also style the .image-container with a background color
and opacity you can toggle those values on :hover.
The best way to keep buttons in place with respective to an image will be to have the container as
position: relative;
and buttons inside the div as
position: absolute;
and placed top and left with px or any unit that doesn't change with size.
But one major thing you can do is have your image as the background of image-container.
That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.
I hope this helps.
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>
I am not good at English, so I ask questions using a translator.
I'm sorry.
I use the ScrollMagic library
Created a Mobile Page.
For ScrollMagic to work
html, body's height should be 100%.
Content Inside has an Iframe.
The Position property of the parent DIV of the Iframe is Fixed.
PC: Put your cursor over the iframe, scroll, scroll, and you won't scroll.
Mobile: Put your cursor on the Iframe and touchMove, you can't scroll.
If I scroll "iFrame,"
I want to scroll ".a, .b" instead.
Below is an example source
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="b">
BOTTOM
</div>
<div class="item">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page" scrolling="no"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.a, .b {
width: 100%;
position:relative;
z-index:2;
}
.a {
background-color: red;
height:120%;
}
.b {
background-color: blue;
height:50%;
bottom:0px;
}
.item {
width:100%;
height:100px;
top:20%;
position:fixed;
z-index:3;
}
.item iframe {
width:100%;
height: 100px;
}
jsfiddle.net
Setting the IFRAM's property to "pointer-events: none" will work.
But click should be possible in the IFRAM,
So I'm looking for another way.
If you have any good information, please let me know.
I need to position header and footer accordingly to content height.
So the header and footer are adjacent to content, even when the content size change.
I would like to know if a CSS solution exists (even CSS 3), if no a JS solution.
Notes: I cannot change the order of DIV in the HTML.
Below pictures of the desired layout.
In more details:
I need the top side of the content positioned just after the end
bottom side of header.
I need the top side of the footer positioned just after the end
bottom side of content.
If header change height, content should move up/down.
If content change height, footer should move up/down.
Live code: http://jsfiddle.net/wkfcnj6c/
Example is welcome :)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
</script>
<style>
#content-a, #content-b{
position: absolute;
width: 500px;
height: 250px;
}
#content-a {
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
position: absolute;
left: 60px;
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
</body>
</html>
with your html structure this isn't possible with pure css, especially with a dynamic height for the header and footer - as they are in a seperate div, it will be impossible for the content divs to know how much space is left to take up. You would need to use js to either move your divs and calculate the heights, but I would do something along the following:
body, html {
height:100%;
position:relative;
margin:0;
padding:0;
}
#master {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#master > div {
display:table;
width:100%;
height:100%;
}
#master > div > div {
display:table-row;
width:100%;
}
and with the help of jquery, reorder your elements:
$('#master').wrapInner('<div/>');
$('#content-b').insertAfter($('#content-a').insertAfter($('#header')));
Example
Example with expanded content and header
Got it I think: http://jsfiddle.net/Preben/80a6q40x/1/
What I did:
Since all is in correct order except the header, we can do this:
Remove ALL position:absolute;
Put margin-top: 50px on the content-a
Put position:ansolute; top:0px; on the #header
You may also edit the #content-a to have min-height: 250px; to adjust to the content in height: http://jsfiddle.net/Preben/80a6q40x/4/
That's it.
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
CSS:
#content-a, #content-b{
width: 500px;
height: 250px;
}
#content-a {
margin-top:50px;
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
position:absolute;
top:0px;
}
#footer {
background-color: blue;
}
At my Page there are tow sections, a header div and the contents div. I want JS or jquery solution to stick the header section at the top, so that when user scrolls the contents section would cross and cover the header section.
html:
<div id="header">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
http://jsfiddle.net/KNh46/
Update: misunderstood, so you want the content to scroll over the header, not under. Then it should be like:
#header {
position: fixed;
height: 100px;
top: 0;
z-index: 100;
}
#content {
position: relative;
margin-top: 100px;
z-index: 101;
}
See an example here: http://jsfiddle.net/aorcsik/v7zav/
If your header is fixed height, say 100px, then:
#header {
position: fixed;
height: 100px;
top: 0;
}
#content {
margin-top: 100px;
}
This way when scrolled to the top, the header won't overlay the content, but when you start to scroll down, it will.
Something like this, if I understand your question:
<div id="content_wrapper" style="position:relative">
<div id="header" style="z-index:1; position:absolute; top:0px">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content" style="z-index:5">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
</div>
I'm using https://github.com/bigspotteddog/ScrollToFixed on my projects with no problems. ScrollToFixed allows you to set when the div will be fixed based on the scroll position.
fiddle with example: jsfiddle.net/ZczEt/167/
you should add css:
*{margin:0;padding:0}
#header{
position:fixed;
width:100%;
height:200px;
background:#ccc;
}
h3{
text-align:center;
}
#content{
background:#f1f1f1;
padding-top:200px;
min-height:500px;
}
jsfiddle
I myself came with another solution :
add another container div to the header and then position that div to fixed, and make the contents to be absolute. but this way you need to specify a min-height or height for the header:
http://jsfiddle.net/pna54/
<div id="header">
<div class="container">
<h3>I'd like to stick here at the background, please! </h3>
</div>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
css:
div{margin:0;padding:0}
h3{
padding:0;margin:0;
padding-top: 100px;
padding-bottom:100px;
text-align:center;
}
#header{
background:#ccc;
min-height:200px;
width:500px;
position:relative;
}
.container{
position:fixed;
width:100%;
max-width:500px;
}
#content{
background:#f1f1f1;
min-height: 500px;
position: absolute;
width:500px;
}
http://jsfiddle.net/pna54/
I'm using iosslider but can't seem to show just one image in the slider at a time. I'm also trying to center the single image shown. Here is what I have for HTML:
HTML:
<div class = 'iosSlider'>
<div class = 'slider'>
<div class="item">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
My CSS looks like this:
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 300px;
border: solid 1px #ff0000;
}
/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .slider .slide {
/* required */
float: left;
width: 100%;
height: 100%;
}
.iosSlider .slider .item img {
width: auto;
height: 300px;
border: solid 1px #00ff00;
}
I'm basically trying to show just one centered image at a time in the slider. Below is what I currently see. As you can see the image to the right is also shown.
Any idea how I can do this with my CSS?
Try resizing the window and you'll see my issue. I'm running this on a mobile webpage that has 320x480 resolution.
Give the images width/height of 100% and you can also position them absolutely:
.iosSlider .slider .item img {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
border: solid 1px #00ff00;
}
Ok do one thing use javascript or jQuery here to loop through your set of images.
Now add another class to the centered or focused image when jQuery function selects it like <div class = 'iosSlider'>
<div class = 'slider'>
<div class="item current">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
and when the next image got focus, remove this class "current" from 1st image and apply to 2nd one and so on.
And wrtite css for this class current liek allign: center; margin-left:auto; margin-right:auto; and other necessary css.