vimeo - Larger youtube movie Bootstrap modal -


larger youtube movie bootstrap modal.

hi all

i have jsfiddle here - http://jsfiddle.net/kc0erdno/1/

i'm using bootstrap modal embed responsive vimeo video.

everything seems working ok can't change starting size of video.

the iframe has width="1000" width of video in page 598.

how can increase size of video in page.

    <!doctype html>     <html lang="en-us">        <head>       <meta http-equiv="content-type" content="text/html; charset=utf-8">       <meta http-equiv="x-ua-compatible" content="ie=edge">       <meta name="description" content="">       <meta name="keywords" content="">       <meta name="robots" content="">        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />        <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />        <link href='http://fonts.googleapis.com/css?family=open+sans:400,300,700,600' rel='stylesheet' type='text/css'>       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>        <style>          .glyphicon-play{           color: red;           font-size: 4em;           margin: 50px 0 0 0;         }         .modal-dialog{           margin: 150px auto;         }           button.close{           font-size:30px;           position: absolute;           top: 5px;         }         .modal-body {             position: relative;             padding-bottom: 56.25%;             padding-top: 30px;             height: 0;              overflow: hidden;         }          .modal-body iframe{             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 600px;         }         </style>         <title>trade marketing</title>       </head>     <body>        <div class="wrap">          <div class="container">            <div class="row">              <div class="glyphicon glyphicon-play" data-toggle="modal" data-target="#mymodal"></div>                <div id="mymodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">                   <div class="modal-dialog">                       <div class="modal-content embed-responsive embed-responsive-16by9">                           <div class="modal-header">                               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                           </div>                           <div class="modal-body">                             <iframe src="https://player.vimeo.com/video/99676584?title=0&amp;byline=0&amp;portrait=0" width="1000" height="528" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="embed-responsive-item"></iframe>'                            </div>                       </div>                   </div>               </div>            </div>          </div>        </div><!--wrap-->       <script src="javascripts/bootstrap.js"></script>     </body>     </html>

change styles modal...

.modal-dialog {     width: 1000px;      /* responsive */     max-width:90%;     min-width:600px; }

Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more