Muse – Adobe Content Corner

Did you know that you can add videos to your web pages in Adobe Muse, without uploading them to Vimeo or YouTube? Read on to find the small snippet of code that does the magic for you.

Make sure that the video you want to embed is in WebM or MP4 format. These formats work in the newer versions of major browsers. Also, make sure that the name of the video does not have uppercase letters or any special characters or spaces.

Open the Adobe Muse file in which you want to add the video and do the following steps:

From the File menu, select Add Files For Upload.
In the file explorer window (for Windows) or the finder window (for Mac), browse to the folder where you have your video file saved.
Select the video file and click Open. The video file is added to the Assets panel.
From the Object menu, select Insert HTML.

In the Edit HTML dialog box, type in or copy the following code snippet to set the video to autoplay, and click OK.

<video width="320" height="240" autoplay>
<source src="assets/my_video.mp4" type="video/mp4">
<source src="assets/my_video.webm" type="video/webm">
Your browser does not support the video tag.</video>

To add controls to the video for playing, pausing, and displaying the volume control, use the following snippet:

<video width="320" height="240" controls>
<source src="assets/my_video.mp4" type="video/mp4">
<source src="assets/my_video.webm" type="video/webm">
Your browser does not support the video tag.</video>

To make the video loop, use the following snippet:

<video width="320" height="240" controls loop>
<source src="assets/my_video.mp4" type="video/mp4">
<source src="assets/my_video.webm" type="video/webm">
Your browser does not support the video tag.</video>

If you have an alternate layout for the site and want to add a video to the tablet or phone layout, use the following snippet for phone/tablet layouts:

<video width="320" height="240" controls>
<source src="../assets/my_video.mp4" type="video/mp4">
<source src="../assets/my_video.webm" type="video/webm">
Your browser does not support the video tag.</video>

Remember to change the name of the video in the code. The video that I am using is called my_ video. You will need to replace it with the name of your video in the code.
You can also change the height and width of the video.

To check if the video displays fine, select Preview Page In Browser from the File menu. The page that you designed will open in the default browser where you can see how the video displays.
To edit the code in the future, right-click on your video on the Adobe Muse page and select Edit HTML. Click OK after you have made the changes.

That’s all, your video is now embedded into your Adobe Muse site. You can use the Insert HTML option to also add audios, iframes, or blogs to your site.

Adobe Muse makes it easy to create elements that span the entire width of the browser. However, there isn’t an out-of-the box feature available to create an element with a 100% height. Using graphic styles and a little bit of code, you can create fluid elements that span the entire height of the browser, irrespective of the size of the monitor or device of a user viewing your website.

In this post, I will show you how you can create a full-height rectangle and enhance the look and feel of your website.

Here are two examples in which full-height rectangles have been used to create sidebars and pretty-looking navigation bars.

Read on to find a small code snippet that helps you stretch a rectangle to 100% height.

Open the master page of your site in Adobe Muse.
Create a rectangle in the upper-left corner and fill it with the color you want.
Pin the rectangle clicking the upper-left pin from the Pin tool.
Select the rectangle.
Choose Window > Graphic Styles to open the Graphic Styles panel.
Click Create a new graphic style from the attributes applied.

The new graphic style is applied to the selected rectangle.
Double-click the new graphic style, rename it to fullHeight and, click OK. Make sure you specify the correct Style Name.
To check how the page looks in the browser, select Preview Page in Browser from the File menu. You will notice that the rectangle does not stretch to full-height. Now, let us add a little piece of code to the master page, to stretch the rectangle to full-height.

Copy the following code snippet.

<style>
.fullHeight {
min-height: 100vh !important;
height: 100vh !important;
}
</style>

From the Page menu, choose Page Properties > Metadata, and paste the code in the HTML for <head> section.
Click OK and, preview the page. You will see that the rectangle stretches to 100% height of the browser.

Using the full-height rectangle in a navigation menu

You can use a full-height rectangle to enhance a vertical navigation menu. I have used the Adobe Muse starter template My Name to demonstrate this scenario.

Open the master page of your template.
Create a rectangle on the left edge of the master page.
Fill the rectangle with the desired color and click the upper-left pin from the Pin tool.
To ensure that the rectangle is on the top layer, right-click on the rectangle, and choose Move to Layer > Menu.
To bring the rectangle to the bottom of the navigation, right-click on it again. Choose Arrange > Send to Back. If you do not see the Send to Back option, it implies that the rectangle is already at the back.
Now, follow steps 4 to 10 from the first section.

That’s it! Your navigation is now ready.

Read on to know how you can use a full-height rectangle to create a sidebar on the left of your website. I have used the Adobe Muse starter template Kahve to demonstrate this scenario.

Open the master page of the template.
Create a rectangle on the left edge of the master page and fill the rectangle with a desired color.
Add a text frame and type “THE KAHVE CAFE” (or any name you like) in the text frame.
Rotate the text frame to 90 degrees and place it above the rectangle that you created.
Add a logo in the upper-left part of the page.
Select the rectangle, the text frame and the logo by holding the Shift key, and pin the objects clicking the upper-left pin from the Pin tool.
Ensure that the rectangle, the text frame and the logo are on the top layer. Select the three objects by pressing the Shift key, and right-clicking on any one of these objects. Choose Move to Layer > Menu.
Now, follow steps 4 to 10 from the first section.