Search code examples
colorboxviewport

colorbox with html5bp

I'm having trouble figuring out why the viewport line from html5bp is causing a problem with colorbox. The problem arises when I view with my iPhone 4. The YouTube video in the popup modal is too big for the screen. On the desktop everything is fine.

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

If I don't use this line, my colorbox modal works great. However my page is not scaled well for mobile.

If I include this line, my colorbox modal is too big for the screen.

Here are example links showing both behaviors:

http://ivantown.com/cbtest/good.html

http://ivantown.com/cbtest/bad.html

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

   <meta name="viewport" content="width=device-width; initial-scale=1.0;">

<title>colorbox youtube</title>
<link rel="stylesheet" type="text/css" href="colorbox.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script> 
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
</script> 
</head>

<body>

<h2>colorbox youtube</h2>

<a class="youtube" href="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1">Link1</a>

</body>
</html>

Thanks for any help. Long time benefactor from the community here but first question.

Solution

  • Your problem lies here

    $(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});

    If you pay attention to your code you are specifying the innerWith of the colorbox to 640px. (innerWidth:640, innerHeight:464) iPhone portrait width is 320px. That's why it is running over.

    So you have two options: you can set the width and height as a percentage, or using javascript detect if the user is on a desktop or mobile device and set your width and height accordingly.