WP Codebox 2 Device Preview

function-snippet.php

<?php
/**
 * Responsive Preview WP Codebox
 *
 * @return void
 */

add_action("admin_head", "add_responsive_buttons_to_wpcodebox");
function add_responsive_buttons_to_wpcodebox()
{
    ?>
    <style>
        .responsive-buttons {
            position: absolute;
            top: 50px;
            right: 65px;
            display:none;
            z-index:1;
        }
        .responsive-buttons button {
            margin-right: 5px;
            min-width:70px;
        }
        .preview-container #wpadminbar{
        	display: none !important; 
        }
        .preview-container iframe{
        	margin: auto;
        }
        .preview-top-bar:after{
	        /* display:block !important;
	        width:20px !important;
	        height:20px !important;
	        position:relative !important;
	        background-color:red !important;
	        content: " " !important; */
        }
        .responsive-buttons:has(~ #wpwrap .preview-container){
        	display:block !important;
        }
        .snippet-container:has(~.preview-container) {
        	max-width: 700px;
        }
    </style>
    <!-- Update the the labels & values to suit your project -->
    <div class="responsive-buttons">
        <button class="preview-full">Full</button>
        <button class="preview-desktop">MacBook Air 13"</button>
        <button class="preview-tablet">iPad Pro</button>
        <button class="preview-mobile">iPhone 13</button>
    </div>
    <script>
        jQuery(document).ready(function($) {
            $('.preview-full').click(function() {
                $('.preview-container iframe').width('100%');
                $('.preview-container iframe').height('100%');
                $('.preview-container iframe').css('max-height', 9999);
            });
            $('.preview-desktop').click(function() {
                $('.preview-container iframe').width(1280);
                $('.preview-container iframe').height(832);
                $('.preview-container iframe').css('max-height', 832);
            });
            $('.preview-tablet').click(function() {
                $('.preview-container iframe').width(834);
                $('.preview-container iframe').height(1194);
                $('.preview-container iframe').css('max-height', 1194);
            });
            $('.preview-mobile').click(function() {
                $('.preview-container iframe').width(390);
                $('.preview-container iframe').height(844);
                $('.preview-container iframe').css('max-height', 844);
            });
            $('div span:contains("PREVIEW")').on("click", function() {
                $('.responsive-buttons').toggle();
            });
        });

    </script>
    <?php
}