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/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/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>
Back