We Keep Coding

DIV height changes after inserting new HTML

I have setup a video header in my homepage. I have setup javascript to remove the DIV (id=remove) with the video (after it ends running) and replace it with an image and 2 buttons.
What happens is that the next DIV below the Video/Image DIV (id=videoheader) is pushed down as the DIV increases in height.
I think there is something wrong with the css that positions the 2 buttons, because running it without inserting the 2 buttons nothing happens and all stays in place as expected.
I have tried to position the button relative and absolute without result. I have tried to adjust margins to position the next div that it does not move.
thanks for the help, Erwin
<div id="videoheader">
<div id="show" class="page-video-containter">
<div id="remove">
<video id="myVideo" playsinline="" autoplay=""
muted="" class="page-media">
<source src="testvideo.mp4" type="video/mp4">
</video>
</div>
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
var el = document.getElementById ("remove");
el.remove();
document.getElementById("show").insertAdjacentHTML('beforeend',
'<img class="page-media" src="SL_STILLS_10.png"> <div
class="women"> <input type="button" class="button"
onclick="location.href=\'#\';" value="Women shop here" /> </div>
<br> <div class="men"> <input type="button" class="button"
onclick="location.href=\'#\';" value="Men shop here" /> </div>');
}
</script>
</div>
This is the CSS
.page-video-container {
position: relative; width: 100%; height: 100%;
}
.page-media {
position: relative; width: 100%; height: 100%; top: 0;
left: 0; right: 0; bottom: 0; background-size: cover; z-index: -1;
margin: 0;
}
#videoheader {
position: relative; margin: 0%;
}
.videotext {
color: white; margin: 0px; padding: 20px; position:
absolute; top: 2%; font-size: 2vw;
}
#videoheader .women .button {
margin-top: -1%; position: absolute;
top: 5%; left: 50%; transform: translate(-50%, -50%);
}
#videoheader .men .button {
margin-top: -1%; position: absolute; top:
10%; left: 50%; transform: translate(-50%, -50%);
}

Popup cannot close once opened multiple times

I have a simple popup that plays a movie and have a cross to close the popup and movie.
This works fine once, however if reopened, you cannot close the popup again. We could have multiple videos on here, for some reason the cross button t close is working first, but not if the popup is reopened.
Anyone have any suggestions? It seems as though the cross function is only working once.
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$(this).parent('.video-img').find('.video-container, .close-video').fadeIn();
e.stopPropagation();
});
$('.close-video').click(function(f) {
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
height: 500px;
display: none;
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: -50px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pdf-video-block">
<div class="video-img">
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="video-container">
<div class="close-video">X</div>
<iframe src="https://player.vimeo.com/video/8733915" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
Thanks

You need to change your close function like:
$('body').on('click', '.close-video', function(f) {
//instead of
//$('.close-video').click(function(f) {
Because after you change parent element (like below) you can't access this element anymore.
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());

It works like this for me:
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$('.video-container, .close-video').fadeIn();
e.stopPropagation();
e.stopPropagation();
});
$('.close-video').click(function(f) {
//vimeoWrap = $('.video-container');
//vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-popup {
width: 100px;
height: 100px;
}
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
margin-top: 0;
margin-left: 0;
height: 500px;
display: none;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: 100px;
left: 20px;
display: none;
cursor: pointer;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="overlay"></div>
<div class="video-container">
<div class="close-video" style="display: block;">X</div>
<iframe src="https://player.vimeo.com/video/317230912" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

Your current click-listener becomes obsolete by vimeoWrap.html(vimeoWrap.html());.
Just put the listener on the parent and it will work even when you reset the html (just changed the first line):
$('.video-container').on("click",".close-video", function(f) {
...
});

Make an iframe as thumbnails on IE, make it not interactive

I have tried to follow what is in this tutorial, but it just is working for Chrome, internet explorer doesn't create the ::after element after the iframe.
Any other ideas of how to achieve the same result ?
EDIT:
I am using the IE 11.
The iframe is placed inside a tooltip generated by the qtip2.
The HTML generated is something like that:
<div class="qtip qtip-default qtip-shadow qtip-youtube qtip-rounded qtip-customized qtip-pos-tl qtip-fixed qtip-focus qtip-hover" id="qtip-10"
role="alert" aria-hidden="false" aria-describedby="qtip-10-content" aria-live="polite"
style="left: 843.02px; top: 289.32px; display: block; z-index: 15001; opacity: 1;"
aria-atomic="false" tracking="false" data-qtip-id="10">
<div class="qtip-tip"
style="border: 0px currentColor !important; left: 4px; top: -6px; width: 6px; height: 6px; line-height: 6px; background-color: transparent !important;">
<canvas width="6" height="6" style="border: 0px currentColor !important; width: 6px; height: 6px; background-color: transparent !important;">
</canvas>
</div>
<div class="qtip-titlebar">
<div class="qtip-title" id="qtip-10-title" aria-atomic="true">Link</div>
</div>
<div class="qtip-content" id="qtip-10-content" aria-atomic="true">
<div style="display: block; white-space: pre-wrap; visibility: visible; -ms-word-wrap: break-word;">
URL: http://portal/sites/test2/Pages/default.aspx
</div>
<iframe name="myiframe" class="iframeLinkUrl" src="http://portal/sites/test2/Pages/default.aspx"
style="display: block; visibility: visible;" target="myiframe" rel="nofollow">
</iframe>
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>
</div>
</div>
And the CSS rules are inherited from the application in general, hard to put in here everything. But to resize the iframe to make it look like a thumbnail I added something like that:
.qtip-content:after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-content::after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-customized {
}
.iframeLinkUrl{
transform: scale(0.32, 0.31) translate(-73%,-99%);
}
As you can see, I also used a div to put in front of the iframe, but even like that it didn't work for IE:
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>

Javascript lightbox won't function inside a html section tag

Above is with section tag and below is withoutI need to have the lightbox inside the section tag. Just not sure as to why this is happening or how to override this. The lightbox is appearing but it will not close and is behind the image. Here is the code:
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
Nothing In the CSS indicates that there's an issue there...
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Thanks.

The console reads:
Uncaught TypeError: Cannot read property 'style' of null
Looking at your code
getElementById(' fade').
^^
Learn to use the developer console so you can find these typos.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close
</div>
<div id="fade" class="black_overlay"></div>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>

How to position Twitter follow-button on top of image

I am trying to position a Twitter follow-button on top of a background splash image using:
<style>
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.twitter-follow-button
{
position: absolute; [Edit: Copy and paste error. This used to read "position: relative"]
top: 0px;
left: 0px;
}
</style>
<div class="splash">
<img src="image_1.png">
<a href="https://..." style="position: absolute; top: 320px; left: 225px;">
<img src="image_2.png">
</a>
Email
Link
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
Follow #twitter_handle
</a>
</div>
But I cannot get the Twitter anchor to share space with the splash image. Putting style="..." code in the Twitter anchor tag does not work either, even though it does for the other two anchors, one of which also displays an image.
EDIT:
This is the script Twitter provides for this button:
!function(d,s,id)
{
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id))
{
js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}
(document, 'script', 'twitter-wjs');

I rearranged your code somewhat. I don't know what your splash image so i have just used one of my own. Here is my latest fiddle
#splash {
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background-image: url("http://www.musicmatters.ie/images/bara2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.twitter-follow-button {
position: absolute;
top: 0px;
left: 0px;
vertical-align: top;
}
a.links1 {
position: relative;
display: inline-block;
float: left;
top: 258px;
width: auto;
padding-right: 20px;
color: white;
text-decoration: none;
font-weight: 900;
}
a.links {
position: absolute;
display: inline-block;
top: 320px;
float: left;
color: white;
text-decoration: none;
font-weight: 900;
}
<div id="splash">
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
<img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" width="30px" height="30px">Follow twitter_handle
<a class="links" href="#">Home</a>
<a class="links1" href="#">Mailto</a>
<a class="links1" href="#">Other Link</a>
</a>
</div>

Try using a z index like so:
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
z-index: -1;
}