Embed videos and HTML content in Adobe Muse

Embedded HTML refers to the source code generated by a third-party website, such as Google, YouTube, Flickr, or Picasa. You can set up an account with these websites, log in, and then copy the embed code from their site and add it to your site.

When you paste embedded HTML into a page, it's like putting a window inside a page on your site that displays the content of a third-party site inside it.

Embedded HTML is a great way to add complex information (such as maps, weather forecasts, stock market quotes) as well as rich media (like digital videos, slideshows, and audio files) quickly and easily. This strategy has the added benefit of enabling you to use a third-party’s site as a hosting service and uploading interface. For example, if you create a free account with YouTube, you can create your own YouTube channel and upload the video content for your site. YouTube includes a web page that simplifies the upload process and hosts the video files on their site. When you want to update your site, simply add more videos to your YouTube channel, copy the embed code, and then paste it into a page to add new videos to your Muse site.

In this section, you’ll copy the source code from Tumblr. This is a free online service that requires you to create an account and sign in, and then post blog entries that are publicly available. Blogs are easy to use and are especially helpful when you want to make it easy for someone who is not technically inclined to update their own site. Most blog sites include an online interface, so you can use any browser to log into your account and post new entries, without any HTML knowledge or additional software.

Note: Visitors that view your website do not need to have a Tumblr account to view the blog you embed on the page. The account is only needed by you as you are designing the site—in order to create a custom blog and generate the embed code you'll add to your website.

1. For this tutorial, you do not need to create a Tumblr account to follow along. Simply copy the following code, which was generated by the Tumblr website after creating a free blog:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

2. In Plan view, double-click the events page thumbnail to open the page and edit it in Design view.
3. Click in the middle of the empty page and use one of the following methods to embed the HTML code:

• Choose Edit > Paste or use the keyboard shortcut (Command+V for Mac or Control+V for Windows) to paste the code directly on the page.
• Choose Object > Insert HTML. Click inside the field of the Edit HTML window that appears and paste the content. Click OK to close the Edit HTML window.

Note: In most cases, Muse will recognize HTML code and will automatically embed the HTML you paste directly on the page. However, if you see the code on the page, instead of the content from the third-party website, then try choosing Object > Insert HTML instead.

After embedding the HTML code, you'll see a blue bounding box with handles surrounding the blog posts that were entered for the Katie's Cafe Tumblr account.

4. Use the Selection tool to drag the handles to resize the blog content, so that it spans approximately 80% of the page width. Center the blog content on the page, to allow the tiling background graphic to show through on the left and right sides. Blue measurement rectangles display the distance from other objects. A red alignment guide briefly appears to indicate when the selected object is centered vertically.

That's all that is required to embed HTML into Muse pages. If you ever want to edit the HTML code, you can right-click on an embedded HTML element and choose Edit HTML from the context menu that appears. This opens the Edit HTML window so that you can access the code you pasted earlier.

Now it's time to review the changes you made to the events page:

5. Choose File > Preview Page in Browser to see the events page display in a new browser window.

Notice that as you scroll down the list of blog entries, the header displays on top of the other page content. This behavior occurs because the event page uses the Foreground master page, and the header content of that master page is set to display in the foreground.

The events page is now complete. In the next section, you'll learn how to paste embedded HTML content inside a widget, to control how the third-party content is displayed based on user interaction.

Embed a video within your Muse website

Currently the target container is filled with a gray fill color. However, you can place all kinds of content within the target container, including different image files, filled rectangles, text, or embedded HTML that you copied from another website.

For this example, you'll paste embedded HTML that was generated by YouTube.

Imagine that you visited a page on YouTube.com to view a video you uploaded with your account. If you click the Share button, and then click Embed, you can access and copy the embed code for the video.

For the purposes of this video, the embed code for the Katie's Cafe video has already been copied their site, so you don't have to visit YouTube. Copy the embed code below to save it to your clipboard:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

The code above uses iFrame tags to surround the link to the video file that is posted on YouTube. An iFrame is an HTML container that enables you to display content inside a “window” when you add it to the web page.

After copying the code above, return to Muse.

1. Use the Selection tool to click the gray border of the page, so that the Selection Indicator in the top left corner displays the word Page. This means that the entire page is selected.
2. Click the larger target container with the gray fill color. The Selection Indicator in the top left corner displays the word: Composition. Click the gray target container again, so that the Selection Indicator displays the word: Container. Click it again (it says Target) and then once more, until the Selection Indicator lists the word: Image Frame. Press Backspace (Windows) or Delete (Mac) to remove the image frame from the target container.

While the inner target container is still selected, the next part involves pasting the HTML code you copied above into the target container.

Note: Just as you experienced when pasting the hero image into the trigger container, pasting code inside a target container can be a bit tricky because the goal is to paste the code INSIDE the target container of the widget. It is possible (depending on the element that you've currently selected) to paste the video code outside the widget, so that it is embedded directly on the page. So proceed carefully... if you test the lightbox by clicking Preview and see that the video is displayed even though you haven't yet clicked the hero image, it means that the video code was not successfully pasted into the container, which is why it displays immediately. The video should only display after you click the hero image.

Follow these steps to paste the video code into the target container (while the Selection Indicator displays the word: Container).

3. Choose Object > Insert HTML. In the window that appears, select the default placeholder text and Press Delete (Mac) or Backspace (Windows) to remove it. Choose Edit > Paste to paste the YouTube code you copied above into the HTML Code field. Click OK to close the HTML Code window.

Note: In many cases, Muse will automatically detect when you paste HTML code, and understand that it is HTML rather than just plain text. So if you prefer, instead of choosing Object > Insert HTML to open the HTML window, you can also right-click (or Control-click) while the inner target container is selected and choose Paste from the context menu that appears. (Or choose Edit > Paste or use the keyboard shortcut to paste the source code into the target container). Muse offers many methods to achieve the same goal of pasting the video code into the target container.

After pasting the code into the target container, you’ll see the first frame of the video displayed (a cup of coffee). That first frame of the video indicates that you pasted the HTML embed code successfully. The video does not play while you are editing the page in Design view. It will only play after you click the Preview button in the Control panel or preview the page in a browser.

4. Use the Selection tool to resize the target container, if necessary, to expand the dimensions to fit the size of the embedded HTML video content. The width should be approximately 670 pixels and the height should be around 415 pixels. While the video is selected, the Selection Indicator displays the word HTML Item.
5. While the target container is selected, press Escape once to select the outer container. Or if you prefer, click away to deselect the Lightbox Display widget, then click on it twice: once to select the Composition, and then again to select the larger container. Use the Selection tool to drag the handles of the container, so that the target container is centered inside it. Resize the dimensions of the container to a width of 710 pixels and a height of 460 pixels.
6. Use the Fill menu to set the fill color of the container to a brown color (#63301B) and set the opacity of the fill color to 100.

7. Select the text frame at the bottom of the container and press Delete (Mac) or Backspace (Windows) to remove it. The text frame can be populated with a caption for the target content, but in this project, it is not used.
8. Select the Close box (with an X) in the top right corner of the container. Click inside the Close box to select its label and delete it. Use the Fill menu to set the fill color to none. Click the folder icon next to the Image section of the Fill menu and browse to select the file named icon-close.png. Use the Selection tool to resize the Close box so that the entire close icon image is displayed.
9. Use the Selection tool to reposition both the target container and trigger containers, to move them in the location where you want them to appear on the page.
10. While the Composition is selected, click the blue arrow button to open the Options panel. For this example, use the following settings:
    • Position: Lightbox
    • Transition: Fading
    • Auto Play: Disabled
    • Shuffle: Disabled
    • Hide All Initially: Disabled
    • Enable Swipe: Enabled
    • Triggers on Top: Disabled
    • Close Button: Enabled
    • Show Lightbox parts while editing: Enabled
    • Show All in Design Mode: Enabled

Click anywhere outside of the Options menu to close it. At this point, the widget is now configured and is ready to be tested.

Previously in this tutorial, you learned how to embed HTML into pages to add a Tumblr blog on the events page. You also saw how to paste embedded HTML inside a Lightbox Composition widget, to display a YouTube video in a lightbox window when the visitor clicks a button. In this section, you'll explore one more type of embedded HTML that is provided by the Google Maps site. Follow these steps:

1. If the visit page is not already open in Design view, click Plan and then double-click the visit page thumbnail to edit it.

This source code was copied from the maps.google.com site. You can create a custom map to one address (or in this case, multiple locations). It is a free service—you simply provide the address (or addresses) and click the Create Map button.

After you create a map, the Google Maps interface lets you enter a title and description. Then, you can click the Link button to access the code. Select the HTML code provided in the field labeled: Paste HTML to embed in website, and you are ready to return to Muse and embed the HTML on a page.

For the purposes of this tutorial, it is not necessary to create a new map yourself. If you'd prefer to test it out, experiment by entering any address, creating a map, and copying the code. However, if you'd prefer to simply test how this works, you can work with some pre-generated HTML code.

2. Copy the following source code:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

3. Paste the code on the top of the visit page. Use the Selection tool to position the embedded HTML in the vertical center of the page, near the top, so that about a quarter of the map overlaps with the header area. Make sure to leave some space between the map and the flower graphic below it, so that you can add a text description.
4. Use the Text tool to drag a text frame below the embedded map. Copy the following text and paste it into the text frame:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

5. Use the Text panel to apply the following settings to style the text:
   • Font: Droid Serif (or any serif font)
   • Font Size: 14
   • Font Color: #222222
   • Font alignment: Left
   • Leading: 120%

After adding the description to the map, the visit page is now complete.

6. Choose File > Preview Page in Browser to see how the visit page appears in a browser.

Notice that the embedded HTML Google map is interactive. You can click the arrows to pan around the map within its window, and you can also click the + and – buttons to zoom in and out.

The site design is now finished for all pages. In the remaining sections of this tutorial, you'll see how to add the final touches and publish the site as a free trial.

 Embedding HTML in your Adobe Muse pages

You can embed HTML code in pages of your site to add complex site features that appear dynamically from a third-party web server. These chunks of code can be copied from any number of web service providers, such as Google, Yahoo!, YouTube, and many others and then conveniently pasted into Muse pages. In this section, you'll look at two different examples of embedded HTML and see how you can quickly add social media content and an interactive Google map to a website built in Muse.

You'll begin by finishing up the Home page content. If you've been following along, the Home page may already be open in Design view. If not, double-click the Home page thumbnail in Plan view to open it for editing in Design view. You'll add the embedded HTML on top of the slideshow that you previously added to the Home page.

Add an embedded HTML Twitter feed to display the most recent posts

You can set up a free account with many different web services, including Twitter, that will allow you to post messages that display on their website. However, in addition to displaying the information on Twitter.com, you can use your account to log in and copy the embed code to display the same messages on a website you create.

In this example, a fictitious account was set up for Kevin's Koffee Kart. This involves signing in to Twitter as a new user and completing the registration form. After that, you can use the site's interface to post messages and copy the embed code that enables you to display it elsewhere on the web. This is the same process you'll use to share blog posts, video content, RSS feeds, stock information, weather forecasts, game scores, and many other types of dynamic data. If you are building a site for a client, ask them if they already use these services to help share information with their customers. In many cases, you can use their account information to log in and then obtain the embed code for the desired data you want to display.

To eliminate the need for you to log into Twitter to create your own account, here is the embed code copied from Twitter for the Kevin's Koffee Kart account:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

The Home page is almost complete. There's just one last element to add to the page.

When you are finished reviewing the Home page, click the Plan link to return to Plan view.

Next, you'll add a different type of embedded HTML to the KART MAP page.

Use embedded HTML to insert a Google map on your Muse web page

Video tutorial

In this section, you'll add content to the KART MAP page by adding embedded HTML that loads a map generated by Google Maps. This is just another small example of the possibilities when using embedded HTML on your site. You can incorporate content from many other third-party sites, such as YouTube, Flickr, or Picasa, as well as add forms, blogs, and other complex site features that you can control by accessing your account and posting content on the corresponding sites.

Adding iframes to your site to display other site pages with embedded HTML

In addition to using embedded HTML to insert code you've pasted from a third-party website, you can also embed an entire web page within an iframe using the same method. For example, you can type a code snippet like this:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

In the code above, replace the text in the title="" and url="" with the desired external web page's title and URL. You can also customize the width and height of the iframe window to the desired values to fit your site's design.

Optionally, you can also add an attribute that ensures the iframe will not display a scrollbar by adding this to the opening iframe tag:

scrolling="no"

By choosing Object > Insert HTML, you can open a new HTML Code window and embed an iframe anywhere on your site and then set any URL (site address, such as www.google.com) to display a site that is live on the Internet inside it.

You can also use an iframe to embed animation, such as the HTML5 animations created in Adobe Edge. Find the name of the HTML file created by Adobe Edge and use that file name in your iframe's URL attribute:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Next, you'll need to upload the Adobe Edge HTML file (and dependent files) to the same host server, alongside your Muse site files. If you're exporting your site to FTP, you can copy the HTML file into the folder generated by Muse during the export process. If you publish directly to the Adobe Business Catalyst® hosting servers by clicking the Publish link in Muse, you can use Adobe Dreamweaver® software or any FTP client to upload the files. To learn more about uploading files via FTP to the Business Catalyst hosting servers, see Publishing websites.

Format the elements of a contact form

Using some standard CSS rules, you can format the elements of the contact form you created in the Business Catalyst Admin Console interface. You can adjust the way the form and the form elements are displayed in order to match your page design.

After pasting the form’s source code from the Admin Console into the page in Muse, the form is displayed with its default styles.

Just like any other element, you can use the side handles to resize the dimensions of the form and move it around on the page to the desired location.

Right-click (or Control-click) the form, and choose HTML from the list that appears.

The HTML code window appears. This displays the code that you pasted from the Admin Console into the page. Place your cursor at the top, before the first line of code and press Enter (Windows) or Return (Mac) a few times, to move the form code down and make some space to add the styles.

This area above the form code is where you can paste or type in the CSS rules that will affect the appearance of the form elements.

To see how this works, copy the code below:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

Paste the code into the top part of the HTML window, above the form.

Click OK to close the HTML window. Notice that the form’s appearance has updated using the new formatting. Click Preview or choose File > Preview page in browser to see how it will display in the published site.

You can use this same strategy to control many of the different form elements that are included when you add the contact form code that you copied from Business Catalyst.

Take a moment to review the code that you pasted in the top of the window. Notice the two style tags at the top and bottom of the CSS rules that surround them. This is important; without the opening and closing style tags, the CSS rules won’t work. Here are the two style tags, displayed on their own:

<style type="text/css">

</style>

These opening and closing style tags tell the browser that the code inside contains CSS formatting rules. Always be sure that these tags exist at the top of the window, before pasting the CSS rules inside.

When you want to make changes to your form elements to update their appearance, it is a matter of calling out the “class” (which is the name assigned to the various elements in the form), specifying the property you want to update, and then setting its attributes.

Consider the line of code below:

input.textarea {

background-color: #fff;

}

The word input.textarea is the name assigned to one type of text field (its “class”). Then, the next line calls out the property you want to change. In this case background-color refers to the background color of the text field. And then after the colon, the #fff is a shorthand way in CSS code to write #ffffff (which is the hexadecimal color value that specifies the color white).

In plain English, the rule above says: Set the background color of this type of text field to white.

To update the form, you could also assign the background color of the text field to a common web color value: red. The code below sets the background color that type of text field to red:

input.textarea {

background-color: red;

}

CSS rules are written in their own language. Just like learning any new language, it takes some practice to become fluent in it. To learn more information about the syntax (the grammar used to write these rules) read the excellent tutorials and CSS reference guides provided online for free by W3Schools.

Once you are ready to begin editing your own contact forms, you can use the list below to identify the class name and the associated properties that you can adjust for each form element.

<style type="text/css">

</style>

Removing the default elements from the top of the contact form

By default, when you paste the form in the page, it will begin with the following two elements.

If you’d like to remove either or both of these elements, open the HTML window and look at the source code you pasted (directly below the CSS styles tag you may have added).

To remove the *Required line, locate this line of code and delete it:

<span class="req">*</span> Required

To remove the Title label and menu, locate these lines of code and delete it:

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

List of classes and properties to add CSS rules and format contact forms

When you assign color values, you’ll get a much greater variety of colors by using an online tool, such as kuler, or an image-editing program (Photoshop or Fireworks), to create hexadecimal color values. Hexadecimal color values always begin with the # symbol, followed by a combination of 3 or 6 alphanumeric characters (0-9 and A-F).

You may find it easier to use the Eyedropper tool in Muse to select colors from your existing design. You can copy the hexadecimal color values from the field in the Color Picker and paste them into the code. However, the following 16 web colors can be specified by name. They can be very helpful to use when you want to test a rule:

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White and Yellow

When you specify the colors by name, do not include the # symbol before the color.

The following list is not exhaustive—there are many different combinations (and many other properties you can use) to affect elements. Use these suggestions to get started. Double-click to select a code snippet, then copy it to your clipboard.

To learn more tips for working with Muse, be sure to visit the Muse Help and Tutorials page, or the Muse Events page for live and recorded webinars.