CODEWITHSUNDEEP
htmlcssiframeyoutubepopup
user3074956
user3074956

Reputation: 111

Youtube link, iframe and css to make it appear like a pop up

Could somebody please show me how I link the link I have created below, to the iframe below with CSS. I kinda want the iframe to be a pop up that almost fills the screen but cant seem to get my head around the CSS needed! I guess the iframe needs to be hidden first, but I really need help. Thanks guys for all your help

iframe

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

html

<a href="http://youtu.be/oHg5SJYRHA0" target="_blank" class="play clearfix proximaBold relative"><span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span></a>

Im trying to achieve the same as the video here http://adayinbigdata.com/ for my college assessment in rebranding.

Upvotes: 1

Views: 7590

Answers (1)

Edward G-Jones
Edward G-Jones

Reputation: 585

I used jquery for something very similar to this and it worked perfectly. Simply have a .onclick for a button or whatever you want the iframe to pop-up when its clicked, then fade in the iframe.

Have the iframe at the top of the DOM so you can position it relative to the view screen and a parent div to the iframe so you can grey out the page creating the illusion that the iframe is sitting on top of the page as a pop-up.

You'd simply put this line

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

in the head. This connects to the jquery library. Then put this code anywhere into your document.

<script type="text/javascript">
$(document).ready(function(){

  $('#vid_button').click (function(){
    $('#pop-up').fadeIn(1000);
  });

}); 
</script>

The '#vid_button' is the button you want the video to pop-up on when clicked. And the '#vid' is the actual video you want to pop up. The number in the brackets next to the .fadeIn is the milliseconds it takes the iframe to appear. So it will take 1 second for this to complete.

Here's a jsfiddle: http://jsfiddle.net/42Kru/2/

Upvotes: 1

Related Questions