We Keep Coding

I'm trying hide div 1 when hovering it, then show div 2 when div 1 is hidden

I'm in need of hiding a div on mouse hover and then show another div instead, I'm trying to achieve this by using css but when I test the code, both divs are hidden. Maybe this can only be achieved using jQuery?
I wrote down this code in pure CSS/HTML:
.responsive-banner {
width: 100%;
height: 154px;
overflow: hidden;
margin: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.responsive-banner a {
text-decoration: none;
color: #fff;
}
.banner-description {
/*width:70%;
height:127px; */
display: flex;
align-items: center;
}
.banner-description-2 {
padding: 7px;
max-height: 127px;
overflow: hidde
}
.banner-title {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 5px;
text-shadow: #000 1px 1px 1px;
color: #000;
}
.banner-txt {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.11rem;
color: #000;
}
.banner-btn {
background: #279fba;
float: right;
margin-left: 20px;
padding: 12px;
font-size: 18px;
border-radius: 4px
}
a.banner-btn {
color: #FF0000;
padding: 3px 5px;
}
a.banner-btn:hover {
color: #5ca5ff;
}
#banneryoutube1 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image1.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
}
#banneryoutube12 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image2.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
/* animation: wahooMario 0.12s linear 1;*/
}
#showbannerinarticle1 {
display: block
}
#showbannerinarticle2 {
display: none
}
#showbannerinarticle1:hover {
display: none
}
#showbannerinarticle2:hover {
display: block
}
<div id="showbannerinarticle1" class="responsive-banner">
<a href="/index.html" rel="nofollow" target="_blank">
<div id="banneryoutube1" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
<div id="showbannerinarticle2" class="responsive-banner">
<a href="/index2.html" rel="nofollow" target="_blank">
<div id="banneryoutube12" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
How can I proceed with this?
Basically when I'm creating is an animated banner.

The issue may be that CSS cannot consider something to be hovered unless it is visible, and so it gets confused.
I would wrap both in another div and target the CSS to the wrapper, like this:
.wrapper:hover .hide-me {
display: none;
}
.show-me {
display:none;
}
.wrapper:hover .show-me {
display: block;
}
<div class="wrapper">
<div class="hide-me">Content 1</div>
<div class="show-me">Content 2</div>
</div>

Heres some workign example you can play with using jquery.
$(document).ready(function(){
$(".div1").hover(function(){
$(".div2").show();
$(".div1").hide();
});
$(".div2").hover(function(){
$(".div1").show();
$(".div2").hide();
});
});
.div1 {
background-color: blue;
cursor: pointer;
color: white;}
.div2 {
background-color: yellow;
display:none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1">
<h1>This is my div 1</h1>
</div>
<div class="div2">
<h1>div 2 is now showing</h1>
</div>

I would use:
document.getElementById('firstDivId').style.display = "none";
document.getElementById('secondDivId').style.display = "block";
// Switch these around when doing the opposite

Why is the sticky header getting stuck?

I've been working on a website for a bit and have come across a problem for the sticky header. When you scroll down it gets caught at the bottom of the hero image, and I have absolutely no clue why it's doing this Here is the issue in action (not promotion). All help appreciated, and sorry for a really long list of code.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
box-sizing: border-box;
}
body, html{
margin: 0;
font-family: HebrewRegular;
background-color: white;
height: 100%;
}
#font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
height:100%;
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%, -50%);
color:black;
font-size: 45px;
background-color: rgb(168, 123, 81);
padding:15px;
}
.content1 {
display: flex;
flex-wrap: wrap;
background-color: rgb(253, 207, 255);
justify-content:center;
}
.content1 > div {
background-color: #f1f1f1;
height:400px;
width: 300px;
margin: 20px;
margin-top: 50px;
text-align: center;
}
.content1 > div > h1{
font-size: 35px;
}
.content1 > div > p{
font-size: 15px;
}
.button5 {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: sticky;
z-index: 1;
text-align: center;
}
.sticky + .content {
padding-top: 102px;
}
<div class="header" id="myHeader">
<img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
</div>
<div class = "top-container">
<h1 class = "hero-text">Placeholder</h1>
</div>
<div class = "content1">
<div class = "about">
<img src = "https://picsum.photos/300/200">
<h1>About</h1>
<p>Learn more about Charm Thai</p>
<button class="button5">About</button>
</div>
<div class = "menu">
<img src = "https://picsum.photos/300/200">
<h1>Menu</h1>
<p>Check out our menu</p>
<button class="button5">Menu</button>
</div>
<div class = "contact">
<img src = "https://picsum.photos/300/200">
<h1>Contact</h1>
<p class = "contactDesc">Find out how to contact us</p>
<button class="button5">Contact</button>
</div>
</div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>

I inspect your code and I think because you have two conflicting classes the .header class is position:sticky and the class .sticky is fixed, you can try to remove the position sticky on the header and just let the .sticky be fixed like below. Let me know if this will work.
header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: fixed;
z-index: 1;
text-align: center;
top: 0;
right: 0;
left: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
<div class="header sticky" id="myHeader">
<img src="Images/charmlogoTrans.png" width="100px" height="100px">
</div>

You should use position fixed instead of sticky. Along with that you also need to set the width to 100%.
With these changes, you don't need to have Javascript to handle the header position
* {
box-sizing: border-box;
}
body, html{
margin: 0;
font-family: HebrewRegular;
background-color: white;
height: 100%;
}
#font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
height:100%;
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%, -50%);
color:black;
font-size: 45px;
background-color: rgb(168, 123, 81);
padding:15px;
}
.content1 {
display: flex;
flex-wrap: wrap;
background-color: rgb(253, 207, 255);
justify-content:center;
}
.content1 > div {
background-color: #f1f1f1;
height:400px;
width: 300px;
margin: 20px;
margin-top: 50px;
text-align: center;
}
.content1 > div > h1{
font-size: 35px;
}
.content1 > div > p{
font-size: 15px;
}
.button5 {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: fixed; /* `sticky` to `fixed` */
width: 100%; /* set the width 100% */
z-index: 1;
text-align: center;
}
<div class="header" id="myHeader">
<img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
</div>
<div class = "top-container">
<h1 class = "hero-text">Placeholder</h1>
</div>
<div class = "content1">
<div class = "about">
<img src = "https://picsum.photos/300/200">
<h1>About</h1>
<p>Learn more about Charm Thai</p>
<button class="button5">About</button>
</div>
<div class = "menu">
<img src = "https://picsum.photos/300/200">
<h1>Menu</h1>
<p>Check out our menu</p>
<button class="button5">Menu</button>
</div>
<div class = "contact">
<img src = "https://picsum.photos/300/200">
<h1>Contact</h1>
<p class = "contactDesc">Find out how to contact us</p>
<button class="button5">Contact</button>
</div>
</div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>

JavaScript Not Manipulating Images

I'm new to Javascript and I have an assignment where I essentially just copied code from the instructions but when I go to run the whole website the JS doesn't do anything.
The objective is to add a click event handler to each of the thumbnail images so that when the smaller image is clicked, your code will show the larger version of the image in the <img> element within the <figure> element.
This same event handler will also set the <figcaption> text of the <figure> to the clicked thumbnail image's title attribute. The click event handler will be attached to the <div id="thumbnails"> element and not to the individual <img> elements.
This is what the JS should do:
When you click on one of the thumbnail images, the corresponding larger image is displayed as the main figure.
When you mouse over the main figure, the title should display against a slightly opaque white background and then fades once the mouse pointer is moved off
window.addEventListener("load", function() {
/*Noah Ratcliff*/
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
var clickedImageSource = e.target.src;
var newSrc = clickedImageSource.replace("small", "medium");
var featuredImage = document.querySelector("#featured img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
}
});
var featured = document.getElementById("featured");
thumbs.addEventListener("mouseover", function(e) {
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0.80;
caption.innerHTML = document.querySelector("#featured img").title;
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0;
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
#featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
#featured figcaption {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
background-color: floralwhite;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
opacity: 0;
padding: 22px 2px 2px 2px;
text-align: center;
display: block;
}
#thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
#thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" alt="big version">
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>

There are several things that are not right in the code: put the event listener on the thumbs instead of figure, abusing id's for css, using the style javascript instead of adding and removing classes (which makes it harder and is a bad practice in general), using querySelector when there is no need (witch also makes your code harder to read and querySelector is slower than getElementById).
Here is an example which should do what I understand you want. I'm not sure tough if I got the opacity thing right. There you will have to work.
window.addEventListener("load", function() {
/*Noah Ratcliff*/
const thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
const clickedImageSource = e.target.src;
const newSrc = clickedImageSource.replace("small", "medium");
const featuredImage = document.getElementById("featured-img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
featuredImage.alt = e.target.alt
}
});
const featured = document.getElementById("featured");
featured.addEventListener("mouseover", function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.add("captition-hovered");
});
featured.addEventListener("mouseout",function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.remove("captition-hovered");
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
.featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
.captition-hovered {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
padding: 22px 2px 2px 2px;
text-align: center;
position: absolute;
z-index:1;
top: 50%;
opacity: 1;
background: rgba(255,250,240, 0.51);
}
.thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
.thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
.featured {
position: relative;
}
.featured-img:hover {
transition:opacity 1.5s;
opacity: 0.5;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure class="featured" id="featured">
<img class="featured-img" id="featured-img" src="https://www.w3schools.com/css/img_lights.jpg" title="Battle" alt="big version">
<figcaption id="fig-captition">Battle</figcaption>
</figure>
<div class="thumbnails" id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>
I also replaced var keyword since now is really indicated to use const and let for your variables.
inline style css link
Also notice how I just added and removed a class instead of manipulating the style one by one. Is way easier to maintain and read. Not to mention that inline styling is overwriting any other type of css. So if you want to change it later the only way is inline styling which can be annoying in certain circumstances.
query selector vs getDocumentById

Button not working in certain parts of my HTML

I have a button id="getstarted" located near the top and the bottom of my HTML. The button near the top works, but the one near the bottom does not work. They are formatted exactly the same. I want both buttons to work.
Here is my code.
**edited code. I added onclick="window.location.href = 'getstarted.html';" to my buttons. now the first button works, but the second one does not work. how do I get the second button to work?
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#header').fadeIn(500);
} else {
$('#header').fadeOut(500);
}
});
});
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#pricing').css("color", "#000");
} else {
$('#pricing').css("color", "#FFF");
}
});
});
// slideshow
$(document).ready(function() {
$("#laptopslideshop > div:gt(0)").hide();
setInterval(function() {
$('#laptopslideshop > div:first')
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo('#laptopslideshop');
}, 3000);
});
#import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#header {
position: fixed;
top: 0px;
width: 100%;
height: 84px;
background-color: #FFFFFF;
color: #000;
z-index: 1;
display: none;
}
#media (max-width: 768px) {
#header {
height: 60px;
}
}
#main {
height: 100vh;
width: 100%;
background: url(Images/teamchat.jpg) no-repeat center;
background-size: contain;
background-size: cover;
}
.headerContents {
text-align: right;
height: 100%;
width: 100%;
float: right;
z-index: 2;
position: fixed;
}
.headerpandc {
margin-right: 18%;
margin-top: 17px;
position: relative;
}
#media (max-width: 768px) {
.headerpandc {
margin-right: 4%;
margin-top: 14px;
}
}
#pricing {
font-family: Nunito Sans;
margin-right: 55px;
font-weight: 800;
letter-spacing: 0.1em;
font-size: 18px;
text-decoration: none;
color: #FFF;
transition: 0.6s;
}
#media (max-width: 768px) {
#pricing {
font-size: 12px;
margin-right: 3%;
}
}
#media (max-width: 355px) {
#pricing {
display: none;
}
}
#pricing:hover {
text-decoration: underline;
}
#pricing:active {
color: #000;
}
#getstarted {
font-family: Nunito Sans;
background-color: #5a52ff;
border-radius: 10px;
border: none;
color: white;
padding: 11px 25px;
text-align: center;
font-size: 18px;
transition: 0.3s;
text-decoration: none;
cursor: pointer;
font-weight: 800;
letter-spacing: 0.05em;
outline: none;
}
#media (max-width: 768px) {
#getstarted {
padding: 8px 15px;
font-size: 12px;
}
}
#getstarted:hover {
background-color: #3d33ff;
}
#getstarted:active {
transform: translateY(2px);
box-shadow: 0 1px #666;
}
#telosdesignlogo {
float: left;
height: 30px;
margin-left: 18%;
margin-top: 6px;
}
#media (max-width: 768px) {
#telosdesignlogo {
margin-left: 4%;
height: 23px;
}
}
/*main text*/
#mainbox {
height: 470px;
width: 500px;
text-align: left;
position: relative;
top: 250px;
left: 28%;
font-family: Nunito Sans;
color: #FFF;
}
#hitelos {
font-size: 2.5em;
font-weight: lighter;
}
#maintext {
font-weight: 800;
font-size: 3.5em;
}
#mainpricing {
z-index: 5;
}
/* Laptop slideshow begins */
#laptopslideshop {
position: relative;
margin-top: 50px;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.mySlides {
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="header"></div>
<div class="headerContents">
<div class="headerpandc">
<a id="pricing" href="pricing.html">Pricing</a><button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
<img src="Images/TelosLogo with text.png" href="index.html" alt="TelosDesign" id="telosdesignlogo" />
</div>
</div>
<div id="main">
<div id="mainbox">
<div id="hitelos">
Hi! We're Telos.
</div>
<div id="maintext">
Beautiful websites tailored to your unique business.
</div>
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
</div>
</div>
<div id="laptopslideshop">
<div>
<img class="mySlides" src="Images/laptoppic1test.png" alt="Laptop and Phone" />
</div>
<div>
<img class="mySlides" src="Images/laptoppic2test.png" alt="Laptop and Phone" />
</div>
</div>

id should be unique to an element(just one), use a class instead
In your code you use javascript(jquery) to control href, not html, see onclick.
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">
The javascript is taking in consideration only the first element because no other element with the same id should exist.
--
I see that you have also:
<script type="text/javascript" src="app.js"></script>
What this code is doing ?
Check the web browser console for JavaScript errors from other sources/code.

Try with this code
<a id="pricing" href="http://google.com">Pricing</a>
<button id="getstarted">Get Started</button>
<a href="index.html">
<img src="Images/TelosLogo with text.png" href="http://google.com" alt="TelosDesign" id="telosdesignlogo"></a>

creating div and image overlay over a video that hides on click

I need something like this. http://jsfiddle.net/2fAxv/1/
But the second div #hideshould be on the top left of the screen with some margin. Can't figure that out. Also, once the image is clicked on the youtube video shrinks to a default size.Is there a way to fix it's size in the same code without using <iframe>
html
<div class="vid">
<img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
<div id="hide1">
<h3>johnny Depp<br><span>Acting Technique</span></h3>
</div>
</div>
css
.vid {
width: 350px;
height: 298px;
float: left;
margin: 20px 25px 70px 70px;
background-size: cover;
background-position: 0px -50px;
background-repeat: none;
}
.vid div {
overflow: hidden;
height: 298px;
width: 300px;
background-color: rgba(255, 255, 255, 0.32);
}
.vid div h3 {
position: absolute;
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: bold;
padding: 10px;
background-color: rgba(255,255,255,0.8);
margin-left: 30px;
max-width: 450px;
}
.vid div h3 span {
color: black;
text-align: center;
width: 300px;
font-family: 'Source Sans Pro', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
}
function
$('#hide').click(function() {
video = '<iframe src="' + $(this).attr('data-video') + '"></iframe>';
$(this).replaceWith(video);
$('#hide1').hide();
});

As to the sizing problem, I'd suggest:
$('img').click(function () {
// creating an <iframe> element:
var video = $('<iframe />', {
// setting its properties,
// this.dataset.video returns the
// value of the 'data-video' attribute:
'src': this.dataset.video,
// retrieves the height/width:
'height': this.clientHeight,
'width': this.clientWidth
});
$(this).replaceWith(video);
});
JS Fiddle demo.
The positioning can be solved, depending on where you want the element to be positioned, by simply using position: absolute on the element to position (the #hide1 element, with position: relative on the parent .vid element):
.vid {
/* other (unchanged) styles omitted for brevity */
position: relative;
}
.vid div {
/* other (unchanged) styles removed for brevity */
position: absolute;
top: 10%;
left: 10%;
}
/* some minor changes follow,
just for tidying up/aesthetics;
but irrelevant to the 'positioning'
aspect */
JS Fiddle demo.
References:
CSS:
position.
JavaScript:
Element.clientWidth.
Element.clientHeight.
HTMLElement.dataset.
jQuery:
click().
replaceWith().