viewport - colorbox with html5bp -
i'm having problem figuring out why viewport line html5bp causing problem colorbox. problem arises when view iphone 4. youtube video in popup modal big screen. on desktop fine.
<meta name="viewport" content="width=device-width; initial-scale=1.0;"> if don't utilize line, colorbox modal works great. page not scaled mobile.
if include line, colorbox modal big screen.
here illustration links showing both behaviors:
http://ivantown.com/cbtest/good.html
http://ivantown.com/cbtest/bad.html
here 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 help. long time benefactor community here first question.
your problem lies here
$(document).ready(function(){ $(".youtube").colorbox({iframe:true, innerwidth:640, innerheight:464}); }); if pay attending code specifying innerwith of colorbox 640px. (innerwidth:640, innerheight:464) iphone portrait width 320px. that's why running over.
so have 2 options: can set width , height percentage, or using javascript observe if user on desktop or mobile device , set width , height accordingly.
colorbox viewport
No comments:
Post a Comment