Create Websites with CHEETAH
The most important design elements at a glance (15)
Note: Be sure to check the mobile view as well. If there is no mobile view of the embedded website, it is often the better idea to do without the iFrame window altogether on the smartphone.
Embed Google Maps
Sometimes you want to include - usually on the contact page - a piece of "city map", from which a potential visitor can see, for example, the exact location of the company or a landmark. While screenshots from various city maps can easily conflict with copyright laws, embedding maps from platforms such as Google Maps is completely unproblematic if the embedding code is taken directly from the platform. And how exactly this works will now be explained step-by-step in detail using an example.
Let's assume that the administrators of the estate of the pharaoh "Cheops" want to integrate a zoomable satellite image or map with the (unfortunately empty) tomb of their client on their website. Which individual steps are necessary for this?
Switch to the "Google Maps" platform in your browser and display the location "Cheops Pyramid, Al Haram, Nazlet El-Semman, Al Giza Desert, Egypt". Then use the zoom function to select the desired map section. Once this has been done, all that remains is to open the left-hand side menu of Google Maps and click on the "Share" entry there, whereupon a new window will open where you will find the "Embed Maps" tab:
Under the tab "Embed Maps" you will find the embed code automatically generated by Google Maps, which you now copy to the clipboard by clicking on the link "COPY HTML". The rest is done quickly. You switch back to the "Cheetah Sitebuilder" and drag an iFrame /HTML element from the right side menu onto your website. Then open its settings window. Now you only have to copy the content of the clipboard under "General settings" into the field "Embed code" and confirm it. And that's all. Now, if you want, you can scale, place and format the container a bit - and then check its functionality and appearance in the preview mode:
Youtube video embedding
As you already know, for embedding Youtube videos into a web page, "Cheetah" provides a separate element in the "Videos" element selector. However, you can also use the inline HTML element for this, because there are a few cases where the native video element is not able to play a particular Youtube video - but the iFrame element is.
The procedure is again very simple and logical. You pick the desired video on the Youtube page and copy its embed code to the clipboard (it can be found under "Share" - "Embed"):
Note, however, that you can make other miscellaneous settings in the window that displays the embed code on Youtube. Only when you are done, press the "Copy" button. The embed code is now in the clipboard and can thus be transferred to the iFrame / Inline HTML - element.
Note: To resize the video area, it is not enough to resize the iFrame. You need to explicitly adjust the "width" and "height" sizes included in the embed code while preserving the aspect ratio. By the way, this is a good use case for the rule of three.