I’m having some trouble with embedding a responsive iframe for Google Slides in my project.
It’s showing up for the smaller viewport sizes. But once the screen gets wide, the iframe and Google Slides presentation disappears from the page.
Oddly enough, it appears no matter the viewport size on the read-only site.
This is the code I have for the page (before tag)
<style>
.responsive-google-slides {
position: relative;
padding-bottom: 56.25%; /* 16:9 Ratio */
height: 0;
overflow: hidden;
}
.responsive-google-slides iframe {
border: 0;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
And this is the embed link for the content:
<div class="responsive-google-slides">
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTAvUIISaiQrZcg26J8WHxFh_plON75Lo_i6jlXBqvwCT6dooO3j8f7HXPkrL-uslGF-XNwhhx5nEOe/embed?start=false&loop=false&delayms=60000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
Could someone help me figure out how to get the iframe to appear on larger viewports?
