Web Engineer

<p>Video Callout can display video popups on your posts and pages. Simply add a video from YouTube, Google Drive, or Vimeo via the WordPress editor and your site visitors will see the video popup in a modal when they visit your chosen page.</p>
<p>Featuring detailed customisation options, allowing you to configure the popup appearance and behaviour from the post editor or globally via your site’s settings page.</p>
<p>Enter the video details into the <em>Video Callout</em> box on the page editor and further customisation options will be displayed.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/dQIKNx1Qp00?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>Settings</h3>
<ul>
<li><em>video</em> – (required) YouTube video URL or ID, Google Drive video URL, or Vimeo video URL.</li>
<li><em>autoplay</em> – Check this for the video to play automatically (note: autoplay videos will be muted as required by most modern browsers).</li>
<li><em>frequency</em> – How long after users see the video before it can be shown again. Select a period (seconds, hours, days) and a duration.</li>
<li><em>delay</em> – Delay in seconds until the video appears.</li>
<li><em>class</em> – Add extra CSS classes to the outer div for custom styling.</li>
<li><em>mute</em> – Turn off sound.</li>
<li><em>modal</em> – Will cover the page with a tinted overlay.</li>
</ul>
<h4>Layout</h4>
<p>You can choose where on the page you want the callout to appear. Plus the size and all properties of the window, frame and close button.</p>
<p>The style and layout can be globally managed for the site with the option to set any overrides on a per page or post basis.</p>
<h4>Autoplay</h4>
<p>Autoplay is not supported by all browsers. If you use autoplay, mute should be turned on for autoplay to work in most cases in those browsers that support it.</p>
<p><em>Only youtube and vimeo support autoplay</em></p>
<h3>Dashboard widget</h3>
<p>The handy dashboard widget neatly shows you how many video callouts you have on your website and lists the most recent ones you updated.</p>


Video Callout

Add a video popup to your posts with an optional delay and display frequency. Fully customisable window with modal option.

Roel Magdaleno

<p>The callout box includes an icon, and the post content. This plugin uses <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> and  <a href="https://github.com/roelmagdaleno/php-heroicons" rel="nofollow ugc">php-heroicons</a> PHP package.</p>
<h3>Icons</h3>
<p>A callout box includes an icon that describes what’s the purpose of the callout box.</p>
<p>The plugin is using <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> so you can go to its website and see what icons are available to use within this plugin.</p>
<p>You can use <code>solid</code> and <code>outline</code> icons.</p>
<h3>Types</h3>
<p>A callout box can have multiple types:</p>
<ul>
<li><code>primary</code></li>
<li><code>success</code></li>
<li><code>danger</code></li>
<li><code>warning</code></li>
</ul>
<p>By default, the callout box is <code>primary</code>.</p>
<h3>Icon Methods</h3>
<p>The icon method can be 2 types:</p>
<ul>
<li><code>solid</code></li>
<li><code>outline</code></li>
</ul>
<p>By default, for shortcodes and Gutenberg the icon method is <code>solid</code>.</p>
<h3>Shortcode</h3>
<p>For WordPress Classic Editor or even Gutenberg, you can use the shortcode:</p>
<pre><code>[wp-callout icon="check-circle" type="primary" method="solid"]
Welcome to WordPress. This is the post content.
[/wp-callout]
</code></pre>
<p>The shortcode supports 3 attributes:</p>
<ul>
<li><code>icon</code>. The icon to show in the callout box. (Default: <code>check-circle</code>)</li>
<li><code>type</code> Callout box type. (Default: <code>primary</code>)</li>
<li><code>method</code> (Default: <code>solid</code>)</li>
</ul>
<h3>Gutenberg Block</h3>
<p>For Gutenberg users, you can use <strong>Callout Box</strong> block.</p>
<p>Every Gutenberg Callout Box, you can change the icon, type and method using the block properties.</p>
<p>Those properties are the same for the shortcode.</p>
<p>Then, you just type your callout box content inside the Gutenberg block.</p>
<h3>Block Presets</h3>
<p>When you insert a new Gutenberg Block Callout you can select 1 of the 4 presets installed in the plugin:</p>
<ul>
<li>Information</li>
<li>Success</li>
<li>Danger</li>
<li>Warning</li>
</ul>
<p>After you select one preset, your callout box will change its background color and icon.</p>


Callout Boxes

Insert callout boxes in your posts and pages using shortcodes and Gutenberg blocks.

Video Callout vs Callout Boxes