When someone visits a specific page in my WordPress website, I want to show a full screen iframe of another website over it. It has to cover my webpage fully, so it looks almost as if the user is on another website now (url will still be of mine).
How can I do that? Is there maybe a plugin for that?
P. S. I know how to code, but I've never developed anything on WordPress. Please be specific :)
EDIT: Trying to put iframe on header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package staymore
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
// When user visits http://my-website.com/privacy-policy
if(is_page('privacy-policy'))
{?>
<iframe src="http://google.com" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
<?}
?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'staymore' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="wrap">
<div class="site-branding">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</header><!-- #masthead -->
<div class="site-banner">
<!-- #Header-image -->
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
</a>
<?php endif; // End header image check. ?>
</div>
<div id="content" class="site-content">
<div class="wrap">
It is quite easy, first please check the page by placing one of the conditional tag in your header.php file:
<?php
// When Page 42 (ID) is being displayed.
if (is_page( 42 ))
{ ?>
<iframe src="https://www.w3schools.com/html/html_iframe.asp" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
<?php } ?>
You can also use page name or slug in this conditional tag:
if (is_page('Contact')) {iframe code here}
or
if(is_page('about-us'))