Copy link to clipboard
Copied
Hi, I am looking to have a full width video at the top of my page thats stays about 570px high. Is there a good widget I can use for this, also I would like the video in the frame to scale from the centre.
Thanks
the default Youtube or Vimeo widgets are what I would use or you can just hand code it if you want self hosted vids... they go in {yourdomain.com}/assets/ by default when you use Muse to upload them
now pinning something to the header can be an issue on phone layouts so scroll effects 0% 0% (fixed width only) is how I work around that
Copy link to clipboard
Copied
Hello Richard2123,
Please try the below solution which I have found online.
1) Create a page with your fullscreen video. It needs to have NO masterpage.
2) Go to the page where you want the fullscreen, scrollable video and on the beginning af the page you place this widget: header-page
3) Insert the name of your page with the fullscreen video in the widget.
You need to preview site in browser to see the effect (preview in page doesn't work, because it needs to load the page containing the video into the main page).
Hope this works for you.
Thanks,
Ankush
Copy link to clipboard
Copied
Richard2123 wrote
Hi, I am looking to have a full width video at the top of my page thats stays about 570px high.
Height and width will vary depending on the end user's device. Obviously, you want to maintain the correct aspect ratio (4:3 or 16:9) otherwise your video wil look distorted.
Use File > Edit HTML and paste this youTube embed code + inliine CSS into your page. For demo purposes, I used a movie trailer that has a 16:9 aspect ratio.
<div id="video-wrapper" style="position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0">
<!--YOUTUBE EMBED CODE-->
<iframe style="position:absolute; top:0; left:0; height: 100%; width:100%" src="https://www.youtube.com/embed/zSWdZVtXT7E" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
</div>
Copy link to clipboard
Copied
the default Youtube or Vimeo widgets are what I would use or you can just hand code it if you want self hosted vids... they go in {yourdomain.com}/assets/ by default when you use Muse to upload them
now pinning something to the header can be an issue on phone layouts so scroll effects 0% 0% (fixed width only) is how I work around that
Copy link to clipboard
Copied
How would you code it?
Copy link to clipboard
Copied
I'm afraid this discussion is 2 years out of date. Muse development has ended and support officially ends in 3 days. You should switch to modern web authoring software that's in active development and has ongoing product support.
That said, full width responsive video is not hard to do with plain HTML and CSS code. I put this demo together in Dreamweaver. But you can use any plain text/code editor. This works in all devices.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Video Iframe</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS code-->
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!--HTML code-->
<h3>Responsive Video Iframe</h3>
<div class="video-container">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</body>
</html>
Or embed just the CSS segment into Muse's meta <head> and HTML segment into Muse's meta <html> panel. Muse results may vary depending on your layout approach.
Copy link to clipboard
Copied
hand coding it for Muse is different to just normal HTML but Nancy is correct... as for what else is out there; Wrapper is what I use now as a code platform
Copy link to clipboard
Copied
I'm planning to switch to some more modern software - any suggestions?
I'm stuck on Muse for one old project and appreciate your help. Will this show video on an iphone, too?
Farhaad
Copy link to clipboard
Copied
The code as posted above does work on iPhone, iPad and Android devices. But if you're still using Muse, you'll have to test it.
Muse alternatives:
Brackets
Dreamweaver
Pinegrow
Squarespace
Visual Studio Code
Wappler
Webflow
Wix
WordPress
Copy link to clipboard
Copied
Pinegrow & Wappler are the best two for making the kind of sites Muse could have done before and it just comes down to how much code you are ok using... also the types of sites you want to make
be aware Muse will not like any hand code that has % so you can not use
width: 100%
unless you also include a wrapper | widget... or without that you tend to get 100 pixels in most devices
outside Muse i.e, normal HTML is different
Wordpress, Dreamweaver and brackets are a waist of time imo but Muse is well and truly dead!