HTML Code

[semoial35139647]

What is the code for a fluid MP4?

[Nancy OShea]

With Bootstrap?  Use the embed-responsive class.  There are 2 different classes depending on the aspect ratio of your video  --  4by3 or 16by9.

4:3 Responsive Aspect Ratio (your MP4 video)

<div class="embed-responsive embed-responsive-4by3">
<video class="embed-responsive-item">
<!--replace this sample with your video-->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>

16:9 Responsive Aspect Ratio (your MP4 video)

<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item">
<!--replace this sample with your video-->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>


</div>

[Jon Fritz]

If you're not using bootstrap, the css and html for a responsive video can be done pretty easily. In the example below, there are padding-bottom settings for the usual video aspect ratios. Comment out or delete the ones you don't need...

CSS:

.video-container {

    /* Place youtube <iframe> or <video> code, minus html height and width attributes, in <div class="video-container"> */

    /* the only thing that can go in the container is the video or iframe code, no other elements */

    position: relative;

    padding-bottom: 56.25%; /* 16:9 */

    /* padding-bottom: 66.66%; /* 3:2 */

    /* padding-bottom: 75%; /* 4:3 */

    height:0;

}

.video-container * {

    position: absolute;

    width: 100%;

    height: 100%;

}

HTML:

<div class="video-container">
your embed code (from youtube) or html5 <video> tag here (no html height or width attributes)

</div>

[semoial35139647]

This is actually being done in Muse.  No Bootstrap.  What code can I use?  The MP4 is Global instead of fluid.   Adobe had suggested that I use SWF. That produced two problems.  The first was that it did not have any controls, the second, in order of appearance , was that most mobile devices cannot see it.  It was suggested that I use a widget from the library, it was antiquated and required archival JAVA.  That means I will just be in another problem not resolve my problems.

I have another problem that I know you can also resolve for me.  When I put the metadata in it shows on the page.  I have tried colins, semicolons, extra spaces and keep getting the same results.  I tried to contact the Muse forum but have not received any response.  You are the code specialists.

Semoia Lin

[email removed by Mod]

[BenPleysier · Accepted solution]

If you want to keep using muse, then do not use Dreamweaver to change the generated code. All of your input should be done using Muse.

To answer your original question, have a look at Responsive HTML5 Video Widget | MusePen.com Blog

I have unmarked the 'correct answer' from Nancy's post because it did not answer your problem.

Although you are very welcome here, for Muse related problems, please use the Muse Forum, mainly because Muse is a compiler that produces the markup. Modified compiled versions can never be used with Muse again.

[Jon Fritz]

Ben's got you covered for the video, that's going to be the best response if you're set on continuing with Muse.

As to your meta data showing up on the page, you'll probably need someone who uses Muse to point to the error there.

Help with using Adobe Muse CC

They might not answer as quickly, but they're going to have far more experience in the program you're using than DW users will. Combining Muse and DW is not an effective workflow as noted by Ben above.

[pziecina]

Jon Fritz II wrote:

Combining Muse and DW is not an effective workflow as noted by Ben above.

Probably completely of-topic but thought it worth a mention.

Once html imports are better supported by browsers, it will be possible to import other html documents into Muse from Dreamweaver.

This of course will depend on Muse supporting the feature. Dreamweaver supports this by default of being an html editor.

[Nancy OShea]

SWF is no solution because it's not supported by mobile devices and modern desktop browsers.

JAVA is likely required by the Muse widget itself and not the output it generates.  Many software products including Adobe's use JAVA IDEs as their backbone so that's nothing new or extraordinary.

I think Ben's advice to use an HTML5 video widget is your best solution so far.

I don't know how much code access Muse gives you for editing Meta Tags.  That's something you need to ask about in the Muse forum.

Nancy

[pziecina]

Nancy OShea wrote:

JAVA is likely required by the Muse widget itself and not the output it generates. Many software products including Adobe's use JAVA IDEs as their backbone so that's nothing new or extraordinary.

I think you are correct Nancy, as browsers are now starting to remove support for java applets. If Muse was to use applets, the future could get interesting

[Nancy OShea]

Re: Meta Tags in Muse, see this forum thread.

How do I add Meta tags to pages?

Nancy

[Ussnorway]

semoial35139647 wrote:

I tried to contact the Muse forum but have not received any response. You are the code specialists.

if you stopped asking one line questions with no details every few days then we may be able to figure out what help you really need.

take the time to explain = better results