Highlighted

Mobile Version Youtube Video

Explorer ,
Jan 30, 2019

Copy link to clipboard

Copied

I am having trouble placing a youtube video in the mobile version of a site. www.drumevents.de > Unser Angebot. It works fine on desktop/tablet and in the mobile version also everything else works OK. Just the videos = desaster.

Views

309

Likes

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

Mobile Version Youtube Video

Explorer ,
Jan 30, 2019

Copy link to clipboard

Copied

I am having trouble placing a youtube video in the mobile version of a site. www.drumevents.de > Unser Angebot. It works fine on desktop/tablet and in the mobile version also everything else works OK. Just the videos = desaster.

Views

310

Likes

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
Jan 30, 2019 0
Adobe Community Professional ,
Jan 30, 2019

Copy link to clipboard

Copied

You did neither create a responsive site nor an adaptive site in Muse.

So you´ll have to either create/add some breakpoint(s) or a phone version of your site.

Bildschirmfoto 2019-01-31 um 08.37.51.png

Kind Regards,

Uwe

Likes

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
Reply
Loading...
Jan 30, 2019 0
Adobe Community Professional ,
Jan 30, 2019

Copy link to clipboard

Copied

It should be pretty easy to add breakpoints at let´s say 768 (which is quite common for mobiles) with a minimum width of 320 (which is quite common for smallest devices).The youtube widget from Muse is responsive so you may reorganize the mobile version of your site.

Let me add that with responsive sites you may not really look for devices but for design "breaks" ( as an "Eselsbruecke" to breakpoint ).

Kind Regards,

Uwe

Likes

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
Reply
Loading...
Jan 30, 2019 0
Explorer ,
Jan 31, 2019

Copy link to clipboard

Copied

Hi Uwe, thank you! I did create a mobile version > http://drumevents.de/phone/unser-angebot.html

See Screenshot. In the seconnd screenshot you see the trouble

IMG_6912.PNGIMG_6913.PNG

Likes

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
Reply
Loading...
Jan 31, 2019 0
LEGEND ,
Jan 31, 2019

Copy link to clipboard

Copied

Uwe is right. The whole site is completely misconstructed. Did you ever look into these tutorials: https://helpx.adobe.com/de/muse/tutorials.html

You have an alternate layout for phones. If these pages are fixed width, browsers will adapt their width automatically.

If they are responsive, it is up to you, to set up the page elements correctly.

Personally I can’t image, why you are using a separate phone layout. Just create one responsive layout, with a few breakpoint.

Your site isn’t that complicated, so it should be not difficult to set it up correctly – if you are willing to have a close look into the tutorials.

(Yes, Nancy, we know, that Muse is EOL and there is no further development. )

Likes

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
Reply
Loading...
Jan 31, 2019 0
Explorer ,
Jan 31, 2019

Copy link to clipboard

Copied

Thank you Günter. The rest of the mobile version works fine. My questions is not wether anybody thinks the site is completely misconstructed (it is not) or wether somebody thinks it is better to build a responsive site (generally yes, in this case no for certain reasons) – the question is wether anybody knows why the youtube videos blow the layout. They do this wether I pin them to the middle, wether I apply responsive width or not. I would be happy if someone can give me a hint.

Likes

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
Reply
Loading...
Jan 31, 2019 0
Adobe Community Professional ,
Jan 31, 2019

Copy link to clipboard

Copied

Watching it in develop mode in Safari, it seems that the youtube is placed somehow to the left while text seems to be placed centered:

Bildschirmfoto 2019-01-31 um 10.48.58.png

Changing view to iPhone SE (320) the view is scrollable to the left. So one problem might be that the alternate view is stopping at 380

and you replace it and reset it at 320? You could change this in page- or siteproperties:

Bildschirmfoto 2019-01-31 um 11.01.55.png

I recommend to set up the text layers to not be responsive but fixed.

Kind Regards,

Uwe

Likes

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
Reply
Loading...
Jan 31, 2019 0
Explorer ,
Jan 31, 2019

Copy link to clipboard

Copied

Thank you, Uwe. I'm on the run, will check it in the afternoon.

Best, K

Likes

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
Reply
Loading...
Jan 31, 2019 0
Adobe Community Professional ,
Jan 31, 2019

Copy link to clipboard

Copied

Having a separate site for phones is counterproductive in my view.  And it's not user friendly.   Ideally, your site should be responsive to comfortably fit ALL devices. 

I tossed this demo together in latest Dreamweaver CC 19.01 with a Prebuilt Bootstrap Layout while talking on the phone.  It took  60 seconds

Here's a live link you can try by resizing your browser viewport. 

Bootstrap - Prebuilt Layout in Dreamweaver 

Nancy O'Shea, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Jan 31, 2019 0
LEGEND ,
Feb 01, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  schrieb

I tossed this demo together in latest Dreamweaver CC 19.01 with a Prebuilt Bootstrap Layout while talking on the phone.  It took  60 seconds

Wow! 60 seconds in Dreamweaver! That’s magic!

No comparison to Muse! :

17 seconds!

Likes

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
Reply
Loading...
Feb 01, 2019 1
Adobe Community Professional ,
Feb 01, 2019

Copy link to clipboard

Copied

Like it

Likes

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
Reply
Loading...
Feb 01, 2019 0
Adobe Community Professional ,
Feb 01, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel  wrote

17 seconds!

I was talking on the phone and that slowed me down a little .

Nancy O'Shea, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Feb 01, 2019 0
Adobe Community Professional ,
Feb 01, 2019

Copy link to clipboard

Copied

Likes

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
Reply
Loading...
Feb 01, 2019 0
Explorer ,
Feb 03, 2019

Copy link to clipboard

Copied

Responsive is the best choice, I know, yet in this case it was better to add the mobile version – the desktop version existing already for some years. I will redo the the whole site in Webflow sooner or later anyway. The youtube issue I solved (via trial and error) this way: Site 320 px (variable), no further breakpoints. Videos centerd and fixed, text and everything else scaled to full width. I know it's a workaround but for the time being it's OK. Thank you everybody for your input.

Likes

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
Reply
Loading...
Feb 03, 2019 0
Adobe Community Professional ,
Feb 03, 2019

Copy link to clipboard

Copied

For adaptive design it's not only a workaround but the correct way. But with the existing website it's quite easy to add two more breakpoints with fixed width as well and would be no difference to your adaptive design. It's just "better" for SEO. That's all. Well done anyway.

Kind Regards,

Uwe

Likes

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
Reply
Loading...
Feb 03, 2019 1
LEGEND ,
Jan 31, 2019

Copy link to clipboard

Copied

fotoroeder​: Even if the site is set up as adaptive site, the „developer mode“ doesn’t show the viewport adaption of mobile devices. One should test it on a real device.

Setting the video to „responsive“ in whatever way won’t work, because the site itself isn’t responsive – even if it seems so, because the text elements are filling the screen width. But this is the case, because they are set to „Stretch to browser width“.

(You may try to set the video widget to „Stretch to browser width“ too.)

Likes

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
Reply
Loading...
Jan 31, 2019 1