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

Mobile Version Youtube Video

Explorer ,
Jan 30, 2019 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

615

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 30, 2019 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

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 30, 2019 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

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
Explorer ,
Jan 31, 2019 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

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 31, 2019 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. )

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

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 31, 2019 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

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
Explorer ,
Jan 31, 2019 Jan 31, 2019

Copy link to clipboard

Copied

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

Best, K

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 ,
Jan 31, 2019 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— 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 ,
Feb 01, 2019 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!

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 ,
Feb 01, 2019 Feb 01, 2019

Copy link to clipboard

Copied

Like 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 ,
Feb 01, 2019 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— 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 ,
Feb 01, 2019 Feb 01, 2019

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
Explorer ,
Feb 03, 2019 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.

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 ,
Feb 03, 2019 Feb 03, 2019

Copy link to clipboard

Copied

LATEST

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

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 31, 2019 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.)

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