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

Full Width Video

Community Beginner ,
Jul 16, 2018 Jul 16, 2018

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

Views

2.0K

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

correct answers 1 Correct answer

LEGEND , Jul 16, 2018 Jul 16, 2018

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

Votes

Translate

Translate
Jul 16, 2018 Jul 16, 2018

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

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
Community Expert ,
Jul 16, 2018 Jul 16, 2018

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>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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 ,
Jul 16, 2018 Jul 16, 2018

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

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
New Here ,
Mar 23, 2020 Mar 23, 2020

Copy link to clipboard

Copied

How would you code it?

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
Community Expert ,
Mar 23, 2020 Mar 23, 2020

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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 ,
Mar 23, 2020 Mar 23, 2020

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

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
New Here ,
Mar 23, 2020 Mar 23, 2020

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

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
Community Expert ,
Mar 23, 2020 Mar 23, 2020

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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 ,
Mar 24, 2020 Mar 24, 2020

Copy link to clipboard

Copied

LATEST

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!

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