iframe Shortcode

Below, you’ll find a detailed guide on how to add the iframe Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the iframe Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the iframe Plugin and the shortcodes it provides:

iframe

"Iframe is a versatile WordPress plugin that simplifies the process of embedding content from various sources into your website. It's user-friendly and highly customizable."

★★★★✩ (55) Active Installs: 100000+ Tested with: 6.3.2 PHP Version: false

Included Shortcodes:

• [iframe]

iframe [iframe] Shortcode

The ‘iframe’ shortcode embeds a YouTube video into your WordPress site. It uses the ‘iframe’ plugin to create a customizable, responsive video player. The shortcode uses various attributes like ‘src’, ‘width’, ‘height’, ‘scrolling’, ‘class’, and ‘frameborder’ to define the video and its display parameters. It also includes a ‘same_height_as’ attribute to match the iframe height with another element. Shortcode: [iframe src=”http://www.youtube.com/embed/mOOClonYKmc” width=”100%” height=”500″ scrolling=”yes” class=”iframe-class” frameborder=”0″]

Shortcode: [iframe]

Parameters

Here is a list of all possible iframe shortcode parameters and attributes:

• src – Location of the content to display in the iframe
• width – Width of the iframe on the webpage
• height – Height of the iframe on the webpage
• scrolling – Allows or disables scrolling within the iframe
• class – CSS class assigned to the iframe for styling
• frameborder – Determines whether to show the border around the iframe or not
• same_height_as – Sets the iframe height to match another element’s height on the page

Examples and Usage

Basic example – Embed a YouTube video using the default parameters provided by the shortcode.

[iframe /]

Advanced examples

Embed a Vimeo video with a customized width and height. The scrolling attribute is also set to ‘no’ to disable scrolling in the iframe.

[iframe src="http://vimeo.com/123456789" width="800" height="600" scrolling="no" /]

Embed a YouTube video with a customized class name. The frameborder attribute is also set to ‘1’ to display a border around the iframe.

[iframe src="http://www.youtube.com/embed/mOOClonYKmc" class="custom-class" frameborder="1" /]

Embed a YouTube video with the same height as another element on the page. The ‘same_height_as’ attribute is used to target the other element by its CSS selector.

[iframe src="http://www.youtube.com/embed/mOOClonYKmc" same_height_as=".target-element" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [iframe] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'iframe', 'iframe_plugin_add_shortcode_cb' );

Shortcode PHP function:

function iframe_plugin_add_shortcode_cb( $atts ) {
	$defaults = array(
		'src' => 'http://www.youtube.com/embed/mOOClonYKmc',
		'width' => '100%',
		'height' => '500',
		'scrolling' => 'yes',
		'class' => 'iframe-class',
		'frameborder' => '0'
	);

	foreach ( $defaults as $default => $value ) { // add defaults
		if ( ! @array_key_exists( $default, $atts ) ) { // mute warning with "@" when no params at all
			$atts[$default] = $value;
		}
	}

	$html = "\n".'<!-- iframe plugin v.'.IFRAME_PLUGIN_VERSION.' wordpress.org/plugins/iframe/ -->'."\n";
	$html .= '<iframe';
	foreach( $atts as $attr => $value ) {
		if ( strtolower($attr) == 'src' ) { // sanitize url
			$value = esc_url( $value );
		}
		// Remove all attributes starting with "on". Examples: onload, onmouseover, onfocus, onpageshow, onclick
		if ( strpos( strtolower( $attr ), 'on' ) !== 0 ) {
			if ( $value != '' ) { // adding all attributes
				$html .= ' ' . esc_attr( $attr ) . '="' . esc_attr( $value ) . '"';
			} else { // adding empty attributes
				$html .= ' ' . esc_attr( $attr );
			}
		}
	}
	$html .= '></iframe>'."\n";

	if ( isset( $atts["same_height_as"] ) ) {
		$html .= '
			<script>
			document.addEventListener("DOMContentLoaded", function(){
				var target_element, iframe_element;
				iframe_element = document.querySelector("iframe.' . esc_attr( $atts["class"] ) . '");
				target_element = document.querySelector("' . esc_attr( $atts["same_height_as"] ) . '");
				iframe_element.style.height = target_element.offsetHeight + "px";
			});
			</script>
		';
	}

	return $html;
}

Code file location:

iframe/iframe/iframe.php

Conclusion

Now that you’ve learned how to embed the iframe Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.