- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
$(function(){
// **************************************************
// pick experience 1 or 2 here
// **************************************************
var experience = 1;
if(experience===2){
setTimeout(function(){
$('.premium_toggle_yes:eq(0)').click();
},200);
}
var html = '<style type="text/css"> .premium{ font-family: gothamlight, sans-serif; background-color: #3E7CB0; color: #fff; font-size: 16px; text-align: left; } .premium_content{ /*border: 1px dashed #fff;*/ margin: auto; /*max-width: 980px;*/ max-width: 1093px; padding: 20px; } .premium_callout{ background-color: #F5C206; color: #432; display: inline-block; font-family: gothammedium, sans-serif; text-transform: uppercase; padding: 8px 18px; } .premium_title{ font-size: 30px; margin-top: 20px; } .premium_subtitle{ font-size: 20px; } .premium_title_mobile{ margin-top: 20px; font-size: 20px; font-family: gothammedium, sans-serif; } .premium_info_container{ /*border: 1px dashed #fff;*/ margin: 40px 0px 20px; font-size: 0px; } .premium_info{ /*border: 1px dashed #fff;*/ display: inline-block; width: 52%; font-size: 16px; font-family: gothamlight, sans-serif; vertical-align: top; } .premium_bullets{ list-style-type: none; margin: 30px 0px 0px; padding: 0px 28px; } .premium_bullets li{ position: relative; margin-bottom: 20px; } .premium_bullets li::before{ content: \'\'; position: absolute; left: -27px; top: 5px; display: inline-block; border: 2px solid #FABF2C; border-top: none; border-right: none; height: 6px; width: 15px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .premium_vid_container{ /*border: 1px dashed #fff;*/ display: inline-block; margin-left: 6%; width: 42%; vertical-align: top; } .premium_vid_still{ box-shadow: 0px 2px 8px 0px rgba(33,33,33,0.4); display: inline-block; width: 100%; cursor: pointer; } .premium_vid_still img{ width: 100%; display: block; } .premium_vid_caption{ font-size: 14px; margin-top: 8px; } .premium_toggle_title{ padding-bottom: 10px; border-bottom: 1px solid #fff; font-family: gothammedium, sans-serif; } .premium_toggle_container{ margin-top: 20px; } .premium_toggle_caption{ display: inline-block; vertical-align: middle; position: relative; bottom: 1px; margin-right: 5px; } .premium_toggle{ display: inline-block; } .premium_toggle_track{ vertical-align: middle; display: inline-block; background-color: #fff; border: 1px solid #aaa; height: 24px; width: 42px; border-radius: 24px; cursor: pointer; -webkit-transition: all 0.15s; transition: all 0.15s; } .premium_toggle_circle{ display: inline-block; background-color: #fff; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0px 1px 2px 0px rgba(33,33,33,0.8); position: relative; top: 1px; left: 1px; -webkit-transition: all 0.15s; transition: all 0.15s; -webkit-transform: translateX(80%); -ms-transform: translateX(80%); transform: translateX(80%); } .premium_toggle_checkbox:checked ~ .premium_toggle_track{ background-color: #ECC200; } .premium_toggle_checkbox:checked ~ .premium_toggle_track .premium_toggle_circle{ -webkit-transform: none; -ms-transform: none; transform: none; } .premium_toggle_label{ vertical-align: middle; text-transform: uppercase; font-family: gothammedium, sans-serif; font-size: 17px; padding: 0px 3px; cursor: pointer; } .premium_toggle_yes{ opacity: 0.5; } .premium_toggle_checkbox:checked ~ .premium_toggle_yes{ opacity: 1; } .premium_toggle_checkbox:checked ~ .premium_toggle_no{ opacity: 0.5; } .premium_toggle_checkbox:focus ~ .premium_toggle_track{ outline: 3px dashed gold; } .premium_toggle_checkbox{ position: absolute; left: -2000px; } .premium_how_it_works_container{ padding: 10px 0 20px; } .premium_how_it_works{ font-size: 16px; color: #F5C206; font-family: gothammedium, sans-serif; cursor: pointer; } .premium_how_it_works_text{ text-decoration: underline; vertical-align: middle; margin-right: 3px; } .premium_how_it_works svg{ vertical-align: middle; position: relative; top: 1px; } .premium_how_it_works_arrow circle{ stroke: unset; fill: #F5C206; } .premium_how_it_works_arrow polygon{ stroke: #3E7CB0; fill: #3E7CB0; } .premium_mobile_only{ display: none; } @media(max-width: 570px){ .premium_info_container{ margin: 20px 0px 20px; } .premium_info{ width: auto; } .premium_vid_container{ margin-left: 29px; width: auto; } .premium_mobile_only{ display: block; } .premium_desktop_only{ display: none; } } /* premium tutoring callouts in product boxes --------------------------------------------- */ .premium_tutoring_callout_container{ position: absolute; bottom: -14px; left: 0px; width: 100%; opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 0.2s; transition: all 0.2s; } .premium_tutoring_callout{ font-size: 12px; font-family: gothammedium, sans-serif; background-color: #ECC200; color: #313131; display: inline-block; padding: 4px 20px; border-radius: 20px; } .premium_tutoring_callout_show{ opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .premium_tutoring_callout_mobile{ color: #417505; font-family: gothammedium, sans-serif; font-size: 0.8em; position: relative; display: block; left: 35px; top: -14px; transition: all 0.2s; opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .premium_tutoring_callout_mobile_show{ opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } /* on-page css changes ------------------------------ */ .oct_2016_container{ padding: 40px 0px; } .oct_2016_blue_bg .js_product_boxes_desktop, .oct_2016_blue_bg .mobile_products_container, .oct_2016_blue_bg #giftingsection{ background-color: #3E7CB0; } .oct_2016_blue_bg #giftingsection{ margin: 0px; padding: 60px 20px; } .oct_2016_blue_bg .meclabs_guarantee_proof{ margin: 0px; } .oct_2016_col{ max-width: 568px; } @media(min-width: 744px){ #simp_container{ width: 68.5em; } } .oct_2016_blue_bg .mobile_guarantee{ margin: 30px auto 0; } .oct_2016_product_square_header{ position: relative; } .oct_2016_best_value{ background-color: #313131; color: #fff; } .mobile_product_label{ padding: 5px 20px; } .mobile_product_name_container{ top: 16px; text-align: left; } .mobile_product_name{ display: inline-block; transition: all 0.2s; } .mobile_product_name_tutoring_shift{ -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); transform: translateY(-7px); } </style> <div class="premium"> <div class="premium_content"> <div class="premium_callout">New Premium Feature Available</div> <div class="premium_title premium_desktop_only">Enhance your lessons with personalized help from a live tutor</div> <div class="premium_subtitle premium_desktop_only">Book sessions as you need them, around your schedule.</div> <div class="premium_title_mobile premium_mobile_only">Enhance your lessons with a personal live tutor</div> <div class="premium_info_container"> <div class="premium_info"> <div class="premium_intro"> <span class="premium_desktop_only">Practice your conversational skills (via 1-way video camera) from the comfort of your home with a native speaking tutor who uses our proven learning methods.</span> <span class="premium_mobile_only">Practice your conversational skills via 1-way video camera with a native speaking tutor</span> </div> <ul class="premium_bullets"> <li>Get help with the specific lesson you are working on</li> <li class="premium_desktop_only">Get help with proper pronunciation</li> <li class="premium_desktop_only">Practice in small groups with other students on your level</li> <li class="premium_mobile_only">Book sessions as you need them, around your schedule</li> <li>Get a new tutoring session every <span class="premium_desktop_only">single</span> month!</li> </ul> </div> <div class="premium_vid_container"> <div class="premium_vid_still premium_desktop_only js_open_video" data-video="imK17Pb3Yws" aria-label="See how Rosetta Stone tutoring works"> <img src="https://www.rosettastone.com/lp/ab_tests/ws-2389/assets/premium_vid_still.jpg" alt=""> </div> <div class="premium_vid_caption premium_desktop_only">Practice your pronunciation with a live tutor using the material covered in your lesson.</div> <div class="premium_how_it_works_container premium_mobile_only"> <span class="premium_how_it_works js_open_video" data-video="imK17Pb3Yws" aria-label="See how Rosetta Stone tutoring works"> <span class="premium_how_it_works_text">See how it works</span> <svg class="premium_how_it_works_arrow" width="20" height="20" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4.75" style="stroke-width:0.3;"></circle> <polygon points="4,3 7,5 4,7" style="stroke-width:0.5;"></polygon> </svg> </span> </div> </div> </div> <div class="premium_toggle_title">Choose subscription length and optional live tutoring</div> <div class="premium_toggle_container"> <span class="premium_toggle_caption">Add Live Tutoring:</span> <span class="premium_toggle"> <input id="js_premium_toggle" type="checkbox" class="premium_toggle_checkbox" name="turn_on_premium_tutoring" autocomplete="off"> <span class="premium_toggle_label premium_toggle_yes">Yes</span> <span class="premium_toggle_track"> <span class="premium_toggle_circle"></span> </span> <span class="premium_toggle_label premium_toggle_no">No</span> </span> </div> </div> </div> <!-- ********************************************************* VIDEO OVERLAY ********************************************************** --> <style> #video_overlay{ position: fixed; z-index: 1000; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(33,33,33,0.9); color: #fff; display: none; text-align: center; overflow: scroll; } #close_video_overlay{ position: absolute; right: 20px; top: 20px; cursor: pointer; width: 30px; height: 30px; } #video_overlay .overlay_x{ stroke: #fff; width: 100%; height: 100%; } #video_scaler{ width: 100%; max-width: 900px; margin: 60px auto 0px; text-align: center; } #video_container{ background: #333; display: inline-block; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); width: 100%; height: 0px; overflow: hidden; padding-top: 56.25%; position: relative; } #video_container iframe{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; } </style> <div id="video_overlay"> <div id="close_video_overlay" tabindex="0" aria-label="Click or press enter key here to close video"> <svg class="overlay_x" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css">/*<![CDATA[*/ .overlay_x line{ stroke-width:0.8; stroke-linecap:round; } /*]]>*/</style> <line x1="0.5" y1="0.5" x2="9.5" y2="9.5"></line> <line x1="0.5" y1="9.5" x2="9.5" y2="0.5"></line> </svg> </div> <div id="video_scaler"> <div id="video_container"></div> </div> </div>';
$(html).insertBefore('.mobile_products_container:eq(0)');
var $toggle = $('#js_premium_toggle');
$('.premium_toggle_track').on('click', function(){
$toggle.click();
});
$('.premium_toggle_yes').on('click', function(){
$toggle[0].checked = true;
});
$('.premium_toggle_no').on('click', function(){
$toggle[0].checked = false;
});
$toggle.on('keydown', function(e){
if(e.keyCode===13){
this.click();
}
});
// add tutoring callouts to desktop product boxes
$('.oct_2016_product_square_header').append('<div class="premium_tutoring_callout_container"><div class="premium_tutoring_callout">With Live Tutoring</div></div>');
// add tutoring callouts to mobile product boxes
$('.mobile_product_name').after('<div class="premium_tutoring_callout_mobile">with Live Tutoring</div>');
$('.premium_toggle_yes, .premium_toggle_no').on('click', function(){
toggle_tutoring($toggle[0]);
});
$toggle.on('change', function(e){
toggle_tutoring($toggle[0]);
});
function toggle_tutoring(checkbox){
setTimeout(function(){
if(checkbox.checked){
$('.premium_tutoring_callout_container').addClass('premium_tutoring_callout_show');
$('.premium_tutoring_callout_mobile').addClass('premium_tutoring_callout_mobile_show');
$('.mobile_product_name').addClass('mobile_product_name_tutoring_shift');
}
else{
$('.premium_tutoring_callout_container').removeClass('premium_tutoring_callout_show');
$('.premium_tutoring_callout_mobile').removeClass('premium_tutoring_callout_mobile_show');
$('.mobile_product_name').removeClass('mobile_product_name_tutoring_shift');
}
$(document).trigger('price_update');
$(document).trigger('cart_update');
},0);
}
function show_premium_tutoring(){
var premium_skus = {
'01': '90471',
'03': '97357',
'06': '97352',
'12': '97342',
'24': '99042'
};
var price_level_of_promo = {
'yosemite': 'msrp', // highest
'goldengate': 'price_level_1',
'swissalps': 'price_level_2',
'parthenon': 'price_level_3',
'mountfuji': 'price_level_4',
'giza': 'price_level_5',
'iguazafalls': 'price_level_6' // lowest
};
var promo_name = RSI({lvl:'24'})[0].code.split('_')[0]; // this will give something like "parthenon"
var price_level = price_level_of_promo[promo_name];
// usage: premium_prices_monthly[price_level][product_lvl]
var premium_prices_monthly = {
'msrp': {
'01': '29.99',
'03': '39.67',
'06': '29.83',
'12': '23.25',
'24': '16.63'
},
'price_level_1': {
'01': '29.99',
'03': '38.99',
'06': '29.99',
'12': '21.99',
'24': '14.49'
},
'price_level_2': {
'01': '29.99',
'03': '36.99',
'06': '27.99',
'12': '19.99',
'24': '13.49'
},
'price_level_3': {
'01': '29.99',
'03': '30.99',
'06': '21.99',
'12': '17.99',
'24': '12.49'
},
'price_level_4': {
'01': '29.99',
'03': '26.99',
'06': '17.99',
'12': '15.99',
'24': '11.99'
},
'price_level_5': {
'01': '29.99',
'03': '24.99',
'06': '15.99',
'12': '13.99',
'24': '10.99'
},
'price_level_6': {
'01': '29.99',
'03': '22.99',
'06': '13.99',
'12': '11.99',
'24': '9.99'
}
};
var premium_prices_upfront = {
'msrp': {
'01': '29.99',
'03': '119',
'06': '179',
'12': '279',
'24': '399'
},
'price_level_1': {
'01': '29.99',
'03': '116.97',
'06': '179.94',
'12': '263.88',
'24': '347.76'
},
'price_level_2': {
'01': '29.99',
'03': '110.97',
'06': '167.94',
'12': '239.88',
'24': '323.76'
},
'price_level_3': {
'01': '29.99',
'03': '92.97',
'06': '131.94',
'12': '215.88',
'24': '299.76'
},
'price_level_4': {
'01': '29.99',
'03': '80.97',
'06': '107.94',
'12': '191.88',
'24': '287.76'
},
'price_level_5': {
'01': '29.99',
'03': '74.97',
'06': '95.94',
'12': '167.88',
'24': '263.76'
},
'price_level_6': {
'01': '29.99',
'03': '68.97',
'06': '83.94',
'12': '143.88',
'24': '239.76'
}
};
// update cart buttons on desktop
$('.js_oct_2016_addtocart[data-media="subscription"]').attr('href', function(){
var lvl = this.getAttribute('data-lvl');
var sku = premium_skus[lvl];
var carturl = this.href.replace(/\/sku\/\d+/i, '/sku/'+sku);
return carturl;
});
// update prices on desktop and mobile
$('.js_oct_2016_price[data-media="subscription"]:not(.mobile_msrp, [data-is-msrp="true"])').html(function(i,old_html){
var lvl = this.getAttribute('data-lvl');
var new_price = premium_prices_monthly[price_level][lvl];
var dollars = new_price.split('.')[0];
var cents = new_price.split('.')[1] || '00';
var dollars_html = old_html.replace(/\d+/, dollars);
// desktop cents
$(this).find('p:eq(0)').html('.'+cents);
// mobile cents
$(this).parent('.mobile_prices_container').find('.productcents p:eq(0)').html('.'+cents);
return dollars_html;
});
// upfront msrp desktop
$('.js_oct_2016_price[data-is-msrp="true"]').html(function(i, prev_html){
var lvl = this.getAttribute('data-lvl');
var new_msrp = premium_prices_upfront['msrp'][lvl];
this.previous_value = this.previous_value || prev_html;
return new_msrp;
});
// upfront msrp mobile
$('.mobile_msrp').html(function(i, prev_html){
var lvl = $(this).parent('.monthly_mobilebottom').prev('.mobile_product_label').find('.mobile_price').attr('data-lvl');
var new_msrp = premium_prices_upfront['msrp'][lvl];
this.previous_value = this.previous_value || prev_html;
return new_msrp;
});
// upfront price desktop
$('.msrpstrong').html(function(i, prev_html){
var lvl = $(this).parent().prev().find('.js_oct_2016_price').attr('data-lvl');
var new_price = premium_prices_upfront[price_level][lvl];
this.previous_value = this.previous_value || prev_html;
return '$'+new_price;
});
// upfront price mobile
$('.monthly_mobilebottom strong').html(function(i, prev_html){
var lvl = $(this).parent('.monthly_mobilebottom').prev('.mobile_product_label').find('.mobile_price').attr('data-lvl');
var new_price = premium_prices_upfront[price_level][lvl];
this.previous_value = this.previous_value || prev_html;
return '$'+new_price;
});
}
function revert_upfront_prices(){
$(
'.js_oct_2016_price[data-is-msrp="true"]' // upfront msrp desktop
+', .mobile_msrp' // upfront msrp mobile
+', .msrpstrong' // upfront price desktop
+', .monthly_mobilebottom strong' // upfront price mobile
).html(function(){
return this.previous_value;
});
}
// when there's an update, check whether to show or remove premium tutoring
$(document).on('cart_update', function(){
var is_premium_on = $('#js_premium_toggle')[0].checked;
if(is_premium_on){
setTimeout(show_premium_tutoring,0);
}
else{
revert_upfront_prices();
}
});
// *********************************************************
// VIDEO OVERLAY
// *********************************************************
$(function(){
// any elements with this class will open a video of your choice
$('.js_open_video').on('click', function(){
showVideo(this);
return false;
});
// make video openers keyboard-accessible
$('.js_open_video').attr('tabindex','0').on('keydown', function(e){
// make "enter" key equivalent to click
if(e.keyCode === 13){
showVideo(this);
return false;
}
}).on('focus', function(){
$(this).css({'outline':'2px dashed #fff'});
}).on('blur', function(){
$(this).css({'outline':''});
});
// show correct video
function showVideo(elem){
var vid_name = elem ? elem.getAttribute('data-video') : 'how_it_works';
var youtube_id = {
live_studio_session: 'SiRtFaXqCqU',
how_it_works : 'imK17Pb3Yws',
red_ball : 'xmS1rgDUec4',
delaine : 'KwFphr58e94',
grace : 'g6WEYqaMFsk',
peter : 'p6l9xp3yH7E',
chris : 'ZOwb57bx4mA',
food_truck : 'jMPL9EjBucA',
anniversary_25 : 'ZBeP_d-uAww'
};
var vid_id = youtube_id[vid_name] || youtube_id['how_it_works'];
var youtube_video = '<iframe src="https://www.youtube.com/embed/'+vid_id+'?rel=0&autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>';
document.getElementById('video_container').innerHTML = youtube_video;
$('#video_overlay').fadeIn().focus();
}
// hide video
function hideVideo(){
// hide overlay
$('#video_overlay').fadeOut(function(){
// get rid of video altogether (otherwise youtube will keep playing it)
document.getElementById('video_container').innerHTML = '';
});
}
// click to close video overlay
document.getElementById('video_overlay').onclick = function(e){
// if the user clicks the background, close the video
if( e.target.id.match(/(^(close_|)video_overlay$)/) ){
hideVideo();
}
};
// if user clicks x, close video (the reason this wasn't added to the event delegation was to make the functionality bulletproof across browsers; yes there was an IE bug)
document.getElementById('close_video_overlay').onclick = hideVideo;
// close video if user presses "esc" key
$(document).on('keydown', function(e){
if(e.keyCode===27){
hideVideo();
}
});
});
});