Adding iframe to Product Description

Whether its videos, images or portfolio pages, seeing them on a completely different website raises the question of ‘valid content sharing.’

What is IFrame?

IFrames are used on almost every website and webpage these days and for a good reason. IFrames lets you create a medium to display content or web pages to and from a completely different website without having to worry about having the content stolen or copyright allegations.

The way iFrames basically work is that they let you display a different webpage on some portion of your own webpage by embedding it. The code inside an embedded webpage can’t be directly accessed which creates a certain sense of content protection.

Embedding Visual Content using IFrames

iFrames are also used a lot for embedding visual and audio content. Whether its video or audio or images it’s a great idea to use iFrames to preview these content as you can easily host them on external servers and sources and easily link it without any difficulty.

This makes sharing your content easy as other website owners can also easily use your videos on their posts and furthermore, the viewership and web analytics are shared with you as well.

How to embed iFrame in WordPress using Plugin

Embedding WordPress iFrame is easier than you imagine. The traditional way to do it is by using the HTML attributes <IFrame>.To do this, simply take the URL of the page you want to embed, and use it as the source for the Tag.

Then, if you want you can add more parameters to your tag. You can define the window of the IFrame by using the params:

Width/Height– For height and Width of the iFrame window, define values in Px
Frameborder – For displaying or hiding the Frameborder, use values ‘0’ or ‘1.’
Align – For defining the window’s page alignment, Use values “left” “right” “right” “top” “bottom.”
Scrolling – For disabling or enabling Scrolling inside the Window. Use values “yes,” “no” or

Now plugins can easily setup WordPress iFrames and add more customizations. Thanks to WPBakery Page Builder it super easy to add iFrames to your project description.

WPBakery Page Builder is only available on WordPress Backend

1. Click on Add button

2. Select Raw HTML

3. Insert the iframe text

For AUTODESK VIEWER:

<iframe style="border: 0px #ffffff none;" src="https://autode.sk/2WZfJ7Y" name="myiFrame" width="100%" height="700px" frameborder="1" marginwidth="0px" marginheight="0px" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

For ARCHICAD BIMX

<iframe ng-if="modelDetails.useWebViewerInsteadOfPreview(modelDetails.model.Model)" ng-src="https://bimx-webviewer.graphisoft.com/SJSHSKDAH&Y" allowfullscreen="" class="ng-scope" src="https://bimx-webviewer.graphisoft.com/SJSHSKDAH&Y"></iframe>

For PDF VIEWER:

<object style="width: 100%; height: 600px;" data="http://stoor.pro/wp-content/uploads/2018/09/PE10_PDF_Planos-20170904.pdf">
<iframe src="http://stoor.pro/wp-content/uploads/2018/09/PE10_PDF_Planos-20170904.pdf&embedded=true"></iframe>
</object>

Furthermore, content websites such as Youtube have an in-built embedding feature for you to share the content. Simply click on Share and Embed and copy the given URL.