Bootstrap 3 - how to embed a responsive object

Question

I am trying to embed a tableau object that uses javascript and params to create an iframe on a site

an example of the embed HTML is

<script type='text/javascript' src='https://tableau.site.edu/javascripts/api/viz_v1.js'></script>

 <div class='tableauPlaceholder' style='width: 704px; height: 304px;'>

   <object class='tableauViz' width='704' height='304' style='display:none;'>

     <param name='host_url' value='https%3A%2F%site.net.edu%2F' />

     <param name='site_root' value='' /><param name='name' value='DepartmentGoals&#47;DeptGoalsDashboard' />

     <param name='tabs' value='no' /><param name='toolbar' value='no' /></object>

 </div>

I attempted what the docs say about responsive embed but I am not having much luck

<div class="tableauPlaceholder embed-responsive embed-responsive-16by9">

       <object class='tableauViz embed-responsive-item' style='display:none;'>

         <param name='host_url' value='https%3A%2F%site.net.edu%2F' />

         <param name='site_root' value='' /><param name='name' value='DepartmentGoals&#47;DeptGoalsDashboard' />

         <param name='tabs' value='no' /><param name='toolbar' value='no' /></object>

</div> 

 I visited the tableau docs and can use a direct iframe without using the javascript API and object with params to create an iframe

so my updated code is this, the embed happens correctly but the iframe is not responsive, it has massive padding at the bottom 

<div class="row">

    <div align="center" class='embed-responsive embed-responsive-16by9'>

      <iframe class='embed-responsive-item' src="https://tableau.site.edu/views/..." width="704" height="304"></iframe>

    </div>

</div>

Answer 1

• Iframe used by you is most likely not responsive because you are setting a width and height.

• Try something more like:

<div class="embed-responsive embed-responsive-16by9">

  <iframe class="embed-responsive-item" src="..."></iframe> <!--note: no width/height in the iframe -->

</div>

• Reference:  http://getbootstrap.com/components/#responsive-embed