Show/Fetch/Iframe Specific Part of Page to Our Website

Elementor CSS July 23, 2026

There is no direct way to show a specific portion of a page using iframe. But I have written a code in which there are 2 parts. Using left and top properties of .iframeContent you can move the content of page that you want to show.

Tip: Use Inspect element in that page and move the top and left properties qualities to adjust the required page part.

Other values are hight and width of .iframeContainer you can control the total space to be shown.

Here is the video guide for it: Link

Code for VS CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .iframeContainer{
         position: relative;
         width: 946px;
         height: 65px;
         overflow: hidden;
         display: flex;
         justify-content: center;
        }
        .iframeContent{
            position: absolute;
            top: -270px;
            left: -193px;
            width: 1329px;
            height: 1996px;
        }
    </style>
</head>
<body>
<div class="iframeContainer">
    <iframe src="https://tiktokio.com/" scrolling="no" class="iframeContent"></iframe>
</div>
</body>
</html>
Here is short version of above code that you can use in HTML widget in wordpress/Elementor
<div style="position: relative; width: 946px; height: 65px; overflow: hidden; display: flex; justify-content: center;">
    <iframe src="https://tiktokio.com/" scrolling="no" style="position: absolute; top: -270px; left: -193px; width: 1329px; height: 1996px; border: none;"></iframe>
</div>

Hurrah – Done