Místo pro zvědavé medvědy

Embed | Elementor | 2024

Pokud bychom použili slovník, tak se „embed“ může přeložit jako „pevně vsadit do, upevnit, vložit“.

Embed je v tagování starší forma objektu. Ale nám zde poslouží na vložení určité stránky do stránky například s vaším projektem.

Toto můžete použít napříkald v případě, že potřebujete na své stránky umístiti typ souboru, který například není běžně podporován, ale pomocí tohoto jednoduchého kódu se zobrazí.

Element HTML

Pro vložení kódu použijeme v Elementoru jednoduše element „HTML“.

Co je důležité, aby Vám zápis fungoval, jak si přejete, tak v řádku 8 si mezi uvozovky napište webové stránky, které potebujete vložit jako „vložené“ stránky.

Dalším nastavením atributů byste se měli zabývat, pokud potřebujete:

upravit šířku (width), která je zde nastvena na 100%,
a výšku (height), kterou máme v kódu nastavenu na 550px.

Vlastně všechny tyto parametry máte v řádku č. 8.

Vzhled zápisu

Po otevření pracovního prostředí elementu HTML nás nejvíce zajímá záložka „Obsah“.

Do políčka „HTML kód“ je potřeba zapsat kód z dalšího odstavce, kde je popsáno i nastavení jednotlivých atributů.

				
					<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <iframe src="https://www.VAŠEDOMÉNA.com" width="100%" height="300"></iframe>
    </body>
</html>

Zápis kódu je v tabulce.

Použijte tlačítko „copy„v pravém horním roku.
Umístěte element „HTML“ na místo, kam plánujete zobrazení externích stránek, popř. obsahu.
Vložte kód například zkratkou Ctrl+V.
Upravte si řádek č.8:
1. Mezy uvozovky zadejte adresu stránky, kterou chcete klonovat.
2. Upravte si šířku zobrazení „width“ v procentech (doporučuji ponechat nastavení a případně upravit v elementu v záložce „Pokročilé“).
3. Upravte si výšku zobrazení „height„, kde tento atribut je v px.
Nezapomeňte uložit a máte hotovo.

Vzhled vloženého webu s použitím HTML elementu

Ostatní příklady vložených stránek

Možná chyba vloženého webu, kdy web problikává

Pokud se vložená stránka „bliká“ při načítání ve Vašem HTML elementu, pravděpodobnou příčinou je její obsah nebo, konfigurace serveru. Tento problém může být způsoben následujícími faktory a zároveň se pokusím popsat i jejich řešení:

1. Problém s načítáním iframe kvůli CORS nebo bezpečnostním nastavením

Stránka může mít ve svém serverovém nastavení X-Frame-Options nebo Content-Security-Policy, což může vést k blikání nebo chybám.
Řešení:
- Ověřte, zda server stránky umožňuje vložení přes iframe. Kontaktujte správce webu nebo změňte hlavičky tak, aby povolovaly iframe (HTTP):

HTTP:

				
					X-Frame-Options: ALLOWALL
Content-Security-Policy: frame-ancestors 'self' https://VAŠEDOMÉNA.com;

2. Styl nebo skripty na cílové stránce způsobují blikání

Některé stránky používají dynamické načítání obsahu (JavaScript nebo AJAX), které může způsobit blikání.
Řešení:
- Vložte níže uvedený kód do iframe v HTML widgetu v Elementoru. Tento kód přidá přechodový efekt, aby se minimalizovalo blikání:

HTML:

				
					<div class="iframe-container">
    <iframe 
        src="https://VAŠEDOMÉNA.com/" 
        title="Vložená stránka"
        loading="lazy">
    </iframe>
</div>

CSS:

				
					/* Kontejner pro iframe */
.iframe-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #ffffff; /* Nastavte pozadí, aby nebylo viditelné blikání */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styl pro iframe */
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0; /* Začíná neviditelný */
    transition: opacity 0.5s ease-in-out; /* Přechodový efekt */
}

/* Animace pro zviditelnění iframe po načtení */
.iframe-container iframe:focus-visible,
.iframe-container iframe:active {
    opacity: 1; /* Po načtení bude iframe viditelný */
}

3. Použití alternativy přes JavaScript pro pomalejší načítání:

Pokud stále dochází k problému, můžete iframe načíst dynamicky přes JavaScript, což může zabránit blikání:

HTML:

				
					<div class="iframe-container">
    <div id="loading">Načítám obsah...</div>
    <iframe 
        id="dynamic-iframe"
        title="Vložená stránka"
        loading="lazy"
        style="display: none;"></iframe>
</div>

CSS:

				
					/* Kontejner pro iframe */
.iframe-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styl načítání */
#iframe-container #loading {
    font-size: 1.5rem;
    color: #666;
    text-align: center;
}

/* Skrýt iframe před načtením */
#iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

JavaScript:

				
					document.addEventListener("DOMContentLoaded", function () {
    const iframe = document.getElementById("dynamic-iframe");
    iframe.src = "https://bearhugs.website/";
    iframe.onload = function () {
        document.getElementById("loading").style.display = "none"; // Skryje text "Načítám obsah"
        iframe.style.display = "block"; // Zviditelní iframe
    };
});

4. Poslední možnost: Zobrazení stránky bez iframe

Pokud problém přetrvává a je to možné, zkuste místo iframe použít přesměrování nebo otevření odkazu v nové záložce (např. přes tlačítko, nebo odkaz přes obrázku).

Pokud žádná z těchto metod nefunguje,

problém bude pravděpodobně přímo na serveru cílové stránky,

a budete muset řešit otázky kompatibility s jejím správcem.

Vložení odkazů je možné využít v případě, že máte několik projektů a je potřeba je lokalizovat na jeden výchozí web.

Vhodné je to například pro hotelové řetězce, kde se takto může host prokliknout přímo na stránku hotelu v požadované destinaci…možností je vskutku mnoho.

Ať se vám daří!