Skip to main content
semoial35139647
Participating Frequently
January 31, 2017
Answered

HTML Code

What is the code for a fluid MP4?

    This topic is closed to new replies. Start a new post to keep the conversation going.
    BenPleysier
    BenPleysierCorrect answer
    Community Expert
    February 3, 2017

    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.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    View reply

    10 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    February 1, 2017

    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>

    Translate
    semoial35139647Author
    Participating Frequently
    February 3, 2017

    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]

    Translate
    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    February 3, 2017

    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.

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 1, 2017

    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>

    Translate
    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices