Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>embedo</h1>
<h3>Content Embed Plugin Demo</h3>
<br>
<div id="embedo-twitter"></div>
<div id="embedo-twitter-grid"></div>
<div id="embedo-twitter-timeline"></div>
<div id="embedo-facebook"></div>
<div id="embedo-instagram"></div>
<div id="embedo-pinterest-pin"></div>
<div id="embedo-pinterest-board"></div>
<div id="embedo-pinterest-profile"></div>
<div id="embedo-youtube"></div>
<div id="embedo-youtube-embed"></div>
<div id="embedo-vimeo"></div>
<div id="embedo-gist"></div>
<div id="embedo-codepen"></div>
<div id="embedo-file"></div>
<div id="embedo-multiple"></div>
<div id="embedo-website"></div>
<div id="embedo-video"></div>
<div id="embedo-googlemaps"></div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Karla');

html, body {
  font-family: 'Karla', sans-serif;
  width: 100%;
}

body {
  padding: 5%;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  background-color: #F6F6F6;
  font-weight: 600;
}

h1 {
  font-weight: 700;
  font-size: 3em;
}

div {
  width: 100%;
  max-width: 750px;
  box-sizing: border-box;
  margin: 25px auto;
}
              
            
!

JS

              
                /**
 * Embedo - Plugin
 * @link https://shobhitsharma.github.io/embedo
 * @import https://unpkg.com/embedo/embedo.min.js
 */

"use strict";

window.onload = function() {
  var embedo = new Embedo({
    facebook: {
      version: "v8.0",
      appId: "180015362652616",
      access_token: '180015362652616|fb4b1e9203a607f5e9d9d49c666ee200',
      xfbml: true
    },
    twitter: true,
    instagram: {
      access_token: '180015362652616|fb4b1e9203a607f5e9d9d49c666ee200'
    },
    pinterest: true
  });

  // Loads tweet
  embedo
    .load(
      document.getElementById("embedo-twitter"),
      "https://twitter.com/Sh0bhit/status/797584590214926340"
    )
    .done(function() {
      console.log("Tweet Loaded. [hide loader if/any]");
    });
  
  // Loads twitter timeline grid
  embedo.load(
    document.getElementById('embedo-twitter-grid'),
    'https://twitter.com/TwitterDev/timelines/539487832448843776', {
      widget_type: 'grid'
    }
  );

  // Loads twitter timeline
  embedo.load(
    document.getElementById('embedo-twitter-timeline'),
    'https://twitter.com/TwitterDev/timelines/539487832448843776', {
      height: 500
    }
  );

  embedo.load(
    document.getElementById("embedo-gist"),
    "https://gist.github.com/brandonb927/4149074.js",
    {
      frameborder: 0
    }
  );

  embedo.load(
    document.getElementById("embedo-codepen"),
    "https:////codepen.io/PavelDoGreat/embed/zdWzEL/?height=265&theme-id=0&default-tab=js,result&embed-version=2"
  );

  // Embed file test
  embedo.load(
    document.getElementById("embedo-file"),
    "http://www.a3ts.org/wp-content/uploads/2014/07/PREVAC.pdf",
    {
      tagName: "embed"
    }
  );

  // Embed external URL test
  embedo.load(
    document.getElementById("embedo-website"),
    "https://static01.nyt.com/video/players/offsite/index.html?videoId=100000005363413"
  );

  // Embed video URL
  embedo.load(
    document.getElementById("embedo-video"),
    "https://archive.org/download/WebmVp8Vorbis/webmvp8.webm",
    {
      controls: "contorls"
    }
  );

  // Multiple URLs
  embedo.load(
    document.getElementById("embedo-multiple"),
    [
      "https://www.instagram.com/p/BX3fMnRjHpZ",
      "https://www.instagram.com/p/BX3ejdJHmkD",
      "https://www.instagram.com/p/BX3VEDqFvmg"
    ],
    {
      hidecaption: false
    }
  );

  // Loads pinterest post
  embedo.load(
    document.getElementById("embedo-pinterest-pin"),
    "https://www.pinterest.com/pin/99360735500167749"
  );

  embedo.load(
    document.getElementById("embedo-pinterest-board"),
    "https://www.pinterest.com/pinterest/official-news/",
    {
      "data-pin-do": "embedBoard",
      "data-pin-board-width": 750,
      "data-pin-scale-height": 600,
      "data-pin-scale-width": 80,
      strict: true
    }
  );

  embedo.load(
    document.getElementById("embedo-pinterest-profile"),
    "https://www.pinterest.com/pinterest/",
    {
      "data-pin-do": "embedUser",
      "data-pin-board-width": 750,
      "data-pin-scale-height": 500,
      "data-pin-scale-width": 80,
      strict: true
    }
  );

  // Loads facebook post
  embedo
    .load(
      document.getElementById("embedo-facebook"),
      "https://www.facebook.com/9gag/posts/10156278718151840",
      {}
    )
    .done(function() {
      console.log("Facebook Loaded. [hide loader if/any]");
    })
    .fail(function(err) {
      console.warn("Facebook embed issue:", err);
    });

  // Loads instagram photo
  embedo.load(
    document.getElementById("embedo-instagram"),
    "https://www.instagram.com/p/BJA9BB-B46A",
    {
      hidecaption: false
    }
  );

  // Loads youtube video
  embedo.load(
    document.getElementById("embedo-youtube"),
    "https://www.youtube.com/watch?v=JGwWNGJdvx8",
    {
      width: 640,
      height: 480
    }
  );

  // Loads youtube embed video
  embedo.load(
    document.getElementById("embedo-youtube-embed"),
    "https://www.youtube.com/embed/vn2qXpcon-s",
    {
      width: 640,
      height: 480
    }
  );

  // Loads vimeo video
  embedo.load(
    document.getElementById("embedo-vimeo"),
    "https://vimeo.com/212603149",
    {
      height: 500
    }
  );

  // // Refresh All Embedo instances
  // setTimeout(function () {
  //   embedo.refresh(document.getElementById('embedo-multiple'));
  // }, 5000);

  // Refresh Single Embedo instance
  // setTimeout(function () {
  //   embedo.refresh(document.getElementById('embedo-facebook'));
  // }, 5000);

  // Destroy All Embdos Test
  // setTimeout(function () {
  //   embedo.destroy(document.getElementById('embedo-multiple'));
  // }, 5000);

  // // Destroy Single Embdos Test
  // setTimeout(function () {
  //   embedo.destroy(document.getElementById('embedo-instagram'));
  // }, 20000);

  // Test Element Watch Events
  embedo.on("watch", function(result) {
    console.log("Embedo watch", result);
  });

  embedo.on("refresh", function(request, data) {
    console.log("Embedo refresh", request, data);
  });

  embedo.on("destroy", function() {
    console.log("Embedo destroy");
  });

  embedo.on("error", function(error) {
    console.error("Embedo error", error);
  });
};

              
            
!
999px

Console