0

I wanted your help to place the iframe at the enter of the webpage when i click on a link.

First when the page is loaded, i want to display link names, When i click on 1st link a div should be displayed(which should cover the entire desktop), in that div i want to show my iframe in the middle of the div.

Can someone help me how to achieve this?

My problem is, always the iframe displaying at the top left corner and i am not able to see the link names. How can i display the iframe at the center.

Following is the code i tried:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css">
<script type="text/javascript" src="myJS.js"></script>
</head>
<body>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U8')">Video 1</a><br/>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U9')">Video 2</a><br/>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U5')">Video 3</a><br/>
<div id="showVideo" style="display:none;">
<iframe id="video1" width="475" height="331" frameborder="0" style="background: black;"></iframe></div>
</body>
</html>

Following is my CSS:

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: lightblue;
}

div#showVideo
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: url("1.png");
}

iframe#video1
{
  margin: 0px auto;
}

Following is JS:

function playMe(vidCode) {
    var iDiv = document.querySelector('#showVideo');
    var iFrame=document.querySelector('#video1');
    iDiv.style.display = "block";
    iFrame.src = "http://www.youtube.com/embed/" + vidCode;
};

JSFiddle

This question is not just placing my iframe at center.

Uday
  • 1,433
  • 10
  • 36
  • 57
  • Possible duplicate of [How to align a
    to the middle (horizontally/width) of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page)
     – Stephen P Dec 02 '15 at 18:28

1 Answers1

0

See if this helps, if not could you create a jsfiddle so we can test throught it? 

div#showVideo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: url("1.png");
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

And check if the url of your image is right and again create a jsfiddle please.

Elow
  • 597
  • 3
  • 9