Skip to content

Instantly share code, notes, and snippets.

@mvark

mvark/IframedTweets.html

Last active Jan 14, 2021
Embed
What would you like to do?
Responsive Iframed Tweets Carousel
<html>
<head>
<title>
Iframed Tweets
</title>
<style>
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
/* padding-top: 75%; 4:3 Aspect Ratio */
/* padding-top: 66.66%; 3:2 Aspect Ratio */
/* padding-top: 62.5%; 8:5 Aspect Ratio */
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<button class="button" onclick="minusDivs()" accesskey="j"> &#10094; </button>
<button class="button" onclick="plusDivs()" accesskey="k"> &#10095; </button>
<hr>
<div class="container">
<iframe class="responsive-iframe" id="show" border="0" frameborder="0" height="700" width="550"
src="https://twitframe.com/show?url=https://twitter.com/mvark/status/1309720586311008259"></iframe>
<ol id="nav" style="display:none">
<li><a href="https://twitter.com/mvark/status/1147467581361537024" rel="nofollow" target="_blank">A True Movie Buff</a></li>
<li><a href="https://twitter.com/mvark/status/1205821940075642880" rel="nofollow" target="_blank">Obesity Warnings We Don't Want To See</a></li>
<li><a href="https://twitter.com/mvark/status/1208031409442443265" rel="nofollow" target="_blank">Attention Seeker</a></li>
<li><a href="https://twitter.com/mvark/status/1220404495764480000" rel="nofollow" target="_blank">Just Another Day In Bangalore</a></li>
<li><a href="https://twitter.com/mvark/status/1221369421261758464" rel="nofollow" target="_blank">Omelette</a></li>
<li><a href="https://twitter.com/mvark/status/1231461773779169280" rel="nofollow" target="_blank">Near Death Experience</a></li>
<li><a href="https://twitter.com/mvark/status/1254984334789885952" rel="nofollow" target="_blank">Tripping down the History Rabbit Hole</a></li>
<li><a href="https://twitter.com/mvark/status/1256110871404670976" rel="nofollow" target="_blank">The Joy Of Science</a></li>
<li><a href="https://twitter.com/mvark/status/1293747327333621760" rel="nofollow" target="_blank">Self-destructive Earth</a></li>
<li><a href="https://twitter.com/mvark/status/1309720586311008259" rel="nofollow" target="_blank">The Masochist and the Chaos Monkey Drone</a></li>
</ol>
</div>
<script>
// TODO: jump to, on click
// Reference: https://stackoverflow.com/a/46144832/325251
// https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
const navbar = Array.from(document.querySelectorAll('#nav>li>a'));
let slideIndex = 0;
showDivs(slideIndex);
function plusDivs() {
slideIndex = slideIndex === navbar.length - 1 ? 0 : slideIndex + 1;
showDivs(slideIndex);
}
function minusDivs() {
slideIndex = slideIndex === 0 ? navbar.length - 1 : slideIndex - 1;
showDivs(slideIndex);
}
function showDivs(slideIndex) {
document.getElementById("show").src="https://twitframe.com/show?url=" + navbar[slideIndex].href;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment