• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

HMTL5 video code - responsive width AND height?

Engaged ,
Jan 05, 2018 Jan 05, 2018

Copy link to clipboard

Copied

I understand that with some CSS coding I can make my embedded HTML5 video (video tag) become responsive but I have text below it so unless it's responsive in BOTH width AND height then it's not very useful. I've tried some widgets but they all seem to have their own bugs. Can anyone please tell me what Muse developers use for embedded videos and how to make them responsive in both width and height?? YouTube and Vimeo are not available options in this case. Only embedded videos can work. Any advice would be mcuh appreciated. Thanks.

Views

1.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 06, 2018 Jan 06, 2018

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 06, 2018 Jan 06, 2018

Copy link to clipboard

Copied

Hey Pavel,

Thanks for the reply but I guess it wasn't very clear what I was asking about in my question. I know how to make the video responsive so that it adjusts it's height and width accordingly. The problem is that if there is any text below my video - the text doesn't move up or down as the video scales up or down. The text just stays in one place. And I want the text to move with the video at a set distance from it.

Here is a test page I made so you can see what I mean: HTML5 test | Ivan The Editor

The code I used for the video tag is:

<video width="100%" height="auto" controls poster="http://www.ivantheeditor.com/videos/amy.jpg">

  <source src="http://www.ivantheeditor.com/videos/amy.mp4" type="video/mp4">

  Your browser does not support HTML5 video.

</video>

So how can I make the text move up and down with the video?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 06, 2018 Jan 06, 2018

Copy link to clipboard

Copied

In order for this to work, you must put the text inside the same div in which the video is located.

4713077a41.png

20f72f219c.gif

To achieve this in Muse there is a function to group.But unfortunately, even if you group these objects, this may not work, for unknown reasons. In this regard, I would recommend that you master other platforms for creating websites. In Muse all this is very hard work, in comparison with the page builders working on bootstrap

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 06, 2018 Jan 06, 2018

Copy link to clipboard

Copied

May be Günter Heißenbüttel​ look here and suggest a workaround. Because my workaround quite radical - do not use in Muse flexible layout and flexible breakpoints entirely. And if you need it, then take a look at another platform, instead of wasting time. I consider the flexible possibilities in Muse a deep failure of the team (IMO).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 06, 2018 Jan 06, 2018

Copy link to clipboard

Copied

No workaround from my side. I never used self-hosted videos, and therefore I won’t give any advices about that.

How does the responsive video and the text below react,

  • if you place a transparent, image frame (= crossed out rectangle tool) of the same size as the video, exactly over or behind this video?
  • if you place the vidoe into a composition target (trigger hidden behind the target), and eventually with an empty, transparent image frame ( = crossed out rectangle tool) in the same size as the composition target nested into the target too?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 06, 2018 Jan 06, 2018

Copy link to clipboard

Copied

I found a simple and obvious solution for you. So obvious that before it was not easy to guess .

Use the following code for the div in which the video is placed:

<style>

#u52263 {

min-height: auto !important;

}

</style>

a83ae99d78.png

Page Properties > HTML for HEAD

881ea97f1c.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 09, 2018 Jan 09, 2018

Copy link to clipboard

Copied

Hey Pavel, thanks for the help. I added the code to the page properties in the HTML for <head> section but nothing changed. It was still not responsive.

I ended up using a 3rd party video widget.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 10, 2018 Jan 10, 2018

Copy link to clipboard

Copied

LATEST

Hi. Perhaps you should have changed the object id. The code I provided was only for your test page. I did not specify this, believing that you should know this by default.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines