Embed Paokinator
Add Paokinator to your website with responsive sizing. It automatically adapts: landscape on desktops, portrait on mobile devices.
Preview
This is how Paokinator will look on your website (responsive: landscape on desktop, portrait on mobile):
Embed Code
Copy this responsive code and paste it into your website's HTML:
<style>
.paokinator-embed-container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.paokinator-embed-container iframe {
width: 100%;
height: 100%;
border: 2px solid #00ff41;
border-radius: 0;
}
/* Landscape for laptops/desktops */
@media (min-width: 768px) {
.paokinator-embed-container {
aspect-ratio: 16 / 10;
}
}
/* Portrait for phones */
@media (max-width: 767px) {
.paokinator-embed-container {
aspect-ratio: 9 / 16;
}
}
</style>
<div class="paokinator-embed-container">
<iframe
src="https://paokinator.olisemeka.dev/embed/play"
frameborder="0"
title="Paokinator Game">
</iframe>
</div>
Instructions:
- Copy the entire code above (includes CSS and HTML)
- Paste it into your HTML file where you want the game to appear
- The widget automatically adapts: landscape on desktops, portrait on phones
- Customize max-width, aspect-ratios, or breakpoint (768px) as needed
Customization Options
Customize the responsive behavior by adjusting these CSS properties:
MAX WIDTH
max-width: 1000px
Controls maximum size
DESKTOP RATIO
aspect-ratio: 16 / 10
Landscape on wide screens
MOBILE RATIO
aspect-ratio: 9 / 16
Portrait on narrow screens