0

I'm trying to create a popup that plays a video, what I would like is for the white background to be the same width as the .content-wrapper.

This is my html

<div class="wrapper">
<div class="content-wrapper">
    <div class="mini-videos">
        <ul>
            <li><a class="show-popup" href="#"><img src="http://s25.postimg.org/6uybo33hr/video.jpg"></a>

            </li>
        </ul>
        <div class="clearboth"></div>
    </div>
</div>
</div>
</div>
<div class="overlay-bg">
<div class="overlay-content">
    <p>
        <embed id="movie_player" allowfullscreen="true" bgcolor="#000000" allowscriptaccess="always" flashvars="dclk=true&no_afv_instream=1&authuser=0&loeid=941281%2C936119%2C902550&iv_invideo_url=http%3A%2F%2Fwww.youtube.com%2Fannotations_invideo%3Fcap_hist%3D1%26plid%3DAATzXXYifNOkqDL7%26video_id%3D_02E4xgoLY4&mpvid=AATzXXYjPoYQ6sku&ad_slots=0&hl=en&title=Funniest%20Banned%20Comercials%202013&afv_instream_max=20000&account_playback_token=QK34hPeTEyR5x_TNhEJsJTnCgEd8MTM5MzU2OTA0NkAxMzkzNDgyNjQ2&ad_host=ca-host-pub-8441233777471037&video_id=_02E4xgoLY4&ad_video_pub_id=ca-pub-6219811747049371&eventid=ltsOU8yBEujYiwa...DCollegeHumor%26session_data%3Dfeature%253Dendscreen%26id%3D_GREWc_iJEY&ytfocEnabled=1&iv3_module=1&pyv_ad_channels=afv_user_yesfunnyyes%2Bafv_user_id_jmG9pnCGCeird0UU0pQhBA%2Byt_mpvid_AATzXXYjPoYQ6sku%2Byt_cid_3100393%2Bytdevice_1&gut_tag=%2F4061%2Fytpwatch%2Fmain_3100393&ptchn=jmG9pnCGCeird0UU0pQhBA&c=WEB&pyv_in_related_cafe_experiment_id=&sffb=true&length_seconds=299&watch_ajax_token=WMKcOU_7gxiFtfHNGfJL5_M8OjJ8MTM5MzU2OTA0NkAxMzkzNDgyNjQ2&cbr=Firefox&sourceid=ys&q=funny&ad_device=1&midroll_freqcap=270" name="movie_player" src="http://s.ytimg.com/yts/swfbin/player-vflyJCJXc/watch_as3.swf" type="application/x-shockwave-flash">
        <noembed>
            <div class="yt-alert yt-alert-default yt-alert-error yt-alert-player">
                <div class="yt-alert-icon">
                    <img src="http://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="icon master-sprite" alt="Alert icon">
                </div>
                <div class="yt-alert-buttons"></div>
                <div class="yt-alert-content" role="alert"> <span class="yt-alert-vertical-trick"></span> 

                    </div>
                </div>
            </div>
        </noembed>
    </p>
    <button class="close-btn">Close</button>
</div>
</div>

This is my jquery

// show popup when you click on the link
$('.show-popup').click(function (event) {
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('.overlay-bg').show(); //display your popup
});

// hide popup when user clicks on close button
$('.close-btn').click(function () {
$('.overlay-bg').hide(); // hide the overlay
});

// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function () {
$('.overlay-bg').hide();
});
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function () {
return false;
});

and this is my css

.wrapper {
background: none repeat scroll 0 0 #3D3D3E;
height: 100%;
width: 100%;
}
.content-wrapper {
background: blue;
margin: 0 auto;
width: 80%;
}
.clearboth {
clear: both;
}
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main-content {
height: 800px;
width: 1000px;
margin: 0 auto;
}
.overlay-bg {
display: none;
position: fixed;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
background: #000;
/* fallback */
background: rgba(0, 0, 0, 0.75);
}
.overlay-content {
background: none repeat scroll 0 0 #FFFFFF;
cursor: default;
left: 30%;
margin: 0 0 0 -20%;
padding: 1%;
position: relative;
top: 15%;
width: 80%;
}
.close-btn {
cursor: pointer;
border: 1px solid #333;
padding: 2% 5%;
background: #a9e7f9;
/* fallback */
background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9e7f9), color-stop(4%, #77d3ef), color-stop(100%, #05abe0));
background: -webkit-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -o-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -ms-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: linear-gradient(to bottom, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.close-btn:hover {
background: #05abe0;
}

Here is a link to the jsfiddle: JSFiddle

1
  • Thought of using fancybox.net ? This does exactly what you are trying to do.
    – DonJuwe
    Feb 27, 2014 at 10:15

2 Answers 2

0

You can simply place the popup in the div and then access the parent width/height via jquery.

    $('#popup').width($('#popup').parent().width());
    $('#popup').height($('#popup').parent().height());
    $('#popup').show();

Have a look at this Fiddle

0

You can apply your content-wrapper width to overlay-bg using jquery..

$( ".overlay-bg" ).css("width",$( ".content-wrapper" ).width());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.