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.
Copy link to clipboard
Copied
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?
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.
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
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).
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,
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>
Page Properties > HTML for HEAD
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.
Copy link to clipboard
Copied
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.