Bei einem Test mit dem Objekt "Vimeo Gallery" wurde nicht einmal das YouTube Video angezeigt.

Falls kein anderen Nutzer eine Lösung hat, dann auf die Incomedia-Mitarbeiter am Montag warten.

Vermutlich geht das nicht mit einer YouTube URL, obwohl das im Objekt "Vimeo Gallery" steht.

Hierzu müssten sich mal die Incomedia-Mitarbeiter äußern und evtl. den Text im Objekt ändern.

ich möchte ja Vimeo Videos abspielen...

Hello Thomas,
could you please provide some URLs of Vimeo videos you planned to use to check the situation?
Thank you.

Online translation:

Hallo Thomas,
könnten Sie bitte einige URLs der Vimeo-Videos angeben, die Sie verwenden wollten, damit ich die Situation überprüfen kann?
Vielen Dank.

Probably the source of issues.

Like explained into the object....  VIMEO URL's  

Ich habe mal Tests mit dem Objekt "Vimeo Gallery" gemacht, aber ich konnte keine Video sehen.

Mit dem Iframe-Video-Code von Vimeo im Objekt "HTML Code" klappt es sofort.

Vielleicht können die Incomedia-Mitarbeiter warum es Probleme gibt.

Hello Daniel,
so you have encountered a different issue than that mentioned by Thomas with the audio, and you could not see the videos at all when using the object, correct?

Online translation:

Hallo Daniel,
Sie sind also auf ein anderes Problem gestoßen als das, welches Thomas mit dem Audio erwähnt hat, und Sie konnten die Videos überhaupt nicht sehen, als Sie das Objekt verwendet haben, richtig?

https://vimeo.com/1057429124

https://vimeo.com/861613541

https://vimeo.com/692170015

Das sind die Videolinks, die ich in die Vimeo Gallery gesetzt habe.

Ich habe es mal mit den 3 Vimeo-Video-Adressen (URLs) getestet, hier die Ergebnisse:

A) URLs im Browser:

     Alle 3 Videos mit Ton

B) URLs im Objekt "Vimeo-Gallery": 

     Video 1 und 2 mit Bild, aber ohne Ton - Lautsprecher ist deaktiviert, siehe Screenshot (1)

     Video 2 geht nicht wegen Datenschutzeinstellungen, siehe Screenshot (2)

----- (1) -----

----- (2) -----

Korrektur:

Video 3 geht nicht wegen Datenschutzeinstellungen, siehe Screenshot (2)

Hier meine Testseite zum Nachschauen

>> https://findelinks.de/123test-aufklappmenue-2/vimeo-galerie.html

Videos werden auf Wunsch bzw. nach Problemlösung wieder entfernt.

Als Notlösung die Einstellung "Durch Vimeo-Link" (neuer Browser-Tab) statt "In der ShowBox".

Aber vielleicht finden die Incomedia-Mitarbeiter den Fehler und eine Lösung.

.

----- Einstellung im Objekt "Vimeo Gallery" -----

Guten Morgen Daniel,

vielen Dank für Unterstützung - wenn ich es richtig verstehe, machen Sie das "ehrenamtlich"!

Vermutlich wird es halt doch die einfache, aber unschöne Lösung im neuen Tab. Die Testseite stimmt genau mit meinen Resultaten überein, kann also gelöscht werden.

Vielen Dank nochmal und einen schönen Tag!

.

Hello Daniel,
thank you for the clarification, yes, one of the videos cannot be displayed like this due to its settings.
Thomas, I have reported the behavior of the other two, it is likely that Vimeo has changed some of its functionalities and the object will need to reflect the new embedding method they use.
I will update you as soon as possible.

Online translation:

Hallo Daniel,
vielen Dank für die Klarstellung. Ja, eines der Videos kann aufgrund seiner Einstellungen auf diese Weise nicht angezeigt werden.
Thomas, ich habe das Verhalten der beiden anderen Videos gemeldet. Es ist wahrscheinlich, dass Vimeo einige seiner Funktionen geändert hat und das Objekt daher an die neue Einbettungsmethode angepasst werden muss.
Ich werde Sie so bald wie möglich auf dem Laufenden halten.

(It > En)

... ... it's a known fact, autoplay audio is disabled by universal convention, especially on mobile devices where it has always been disabled....

... however, with some of my exclusive inventions using EXTRA codes, it would be possible:
● 1) - for the VIMEO video gallery, clicking on the slide preview would activate automatic autoplay in the ShowBox with audio enabled;
● 2) - for normal links to the VIMEO video in the ShowBox, activate automatic autoplay in the ShowBox with audio enabled;
...
... if you're interested in trying my codes, which are very simple and apply with one click, you need to post the LINK to the page where you use the VIMEO gallery or where you use the link, as Daniel did, so I can evaluate...
... obviously, the videos must be valid, like the ones I indicated earlier with OK...
... ... if you do, I'll come back here... ...
.

...(...you could also add just the button to turn the audio on/off...)...

.

ciao

.

Yes please! - the site with the Vimeo Gallery: https://narrevo.com/index.html

the sites with Vimeo videos in showbox: https://narrevo.com/story-factory.html

https://narrevo.com/social-media.html

that means, that I have to allow embedding in any sites? Allowing it in certain domains is not enough?

...to avoid confusion, let's take it one step at a time....
... for the VIMEO gallery on this page:
https://narrevo.com/social-media.html
... you can try this invention of mine with EXTRA code with one click...
... when you've done it, let me know...
... you can paste the code : into any HTMLCodeObject, (or paste it into the Expert|/head section of the page properties)...

<script>
/** --- autoplay+audio attivo per video VIMEO nello ShowBox x WSx5 by KolAsim --- **/
$(function() { function waitForSwiper(maxAttempts = 10, interval = 500) { let attempts = 0; const checker = setInterval(function() { const $swiper = $(".swiper-container"); if ($swiper.length > 0 && $swiper.is(":visible")) { clearInterval(checker); setTimeout(initSwiperHandlers, 1000); } else { attempts++; if (attempts >= maxAttempts) { clearInterval(checker); } } }, interval); } function initSwiperHandlers() { $(".swiper-container").on("click", function() { autoplayK(); }); } function resizeVimeoBox() { const $iframe = $("#imShowBox iframe"); const $box = $("#imShowBox"); if (!$iframe.length || !$box.length) return; $box.css({ position: "relative" }); const boxWidth = $box.width(); const videoHeight = Math.round(boxWidth * 9 / 16); $iframe.css({ position: "absolute", top: 0, left: 0, width: "100%", height: videoHeight + "px", border: 0, zIndex: 1 }); $box.css({ height: videoHeight + "px", overflow: "hidden" }); $("#imShowBoxFullScreenToggle, #imShowBoxClose").css({ display: "block", opacity: 1, visibility: "visible" }); } function autoplayK() { setTimeout(function() { const $iframe = $("#imShowBox iframe"); if (!$iframe.length) return; let url_videoK = $iframe.attr("src"); url_videoK = url_videoK.replace("muted=1", "muted=0"); if (!url_videoK.includes("autoplay=1")) { url_videoK += (url_videoK.includes("?") ? "&" : "?") + "autoplay=1"; } $iframe.attr("src", url_videoK); $(".clear-button-style").hide(); resizeVimeoBox(); }, 1000); } let resizeTimeout; $(window).on("resize", function() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function() { resizeVimeoBox(); }, 1000); }); $(document).on("click", "#imShowBoxFullScreenToggle", function() { setTimeout(resizeVimeoBox, 1000); }); waitForSwiper(); });
</script>

.

ciao

.

Wow - it works! Both Vimeo Gallerys appear correctly in the show box. I checked on several browsers both macos and windows - no problem up to now.

Thank you so much!

Now, there is only the question left, if a vimeo video can be played in a showbox from an animated image. Do you perhaps also have an idea here?

Best 

Thoma

https://narrevo.com/story-factory.html
Here you used this link:
https://player.vimeo.com/video/1057429124
... and instead you have to use this other link, the normal one:
https://vimeo.com/1057429124

When you've made the change, let me know so I can evaluate it and then I'll post the code for autoplay + audio.

.

ciao

.

Sorry, have been off. Done so far, links are updated.

Best

Thomas

x >  https://narrevo.com/story-factory.html

...the second and fourth videos are protected; to view them, you must click the VIMEO warning...
...or, even better, since you already know, assign the links to the tabs for these two videos in the popup and not in the showbox...
...for the two normal video videos, the first and third, the VIMEO videos open in the showbox and start automatically with audio...
...this is my exclusive code:

<script>
/** -- autoplay+audio x video Vimeo nello ShowBx x WSx5 bye KolAsim -- **/
$(document).ready(function() { function autoplayK() { setTimeout(function() { var $iframe = $("#imShowBox iframe"); if ($iframe.length === 0) return; var src = $iframe.attr("src"); var url = new URL(src); url.searchParams.set("autoplay", "1"); url.searchParams.set("muted", "0"); $iframe.attr("src", url.toString()); $(".clear-button-style").show(); var $container = $("#imShowBox"); $container.css({ position: 'relative', width: '100%', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }); $iframe.css({ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 }); }, 1000); } $(".btn").click(function(){ autoplayK(); }); $(window).resize(function(){ var $iframe = $("#imShowBox iframe"); if ($iframe.length === 0) return; $iframe.css({ width: '100%', height: '100%' }); }); let attempts = 0; let maxAttempts = 10; let checkSidesContainer = setInterval(function() { attempts++; var $sides = $(".sides-container"); if ($sides.length > 0 && $sides.is(":visible")) { clearInterval(checkSidesContainer); setTimeout(function(){ $(".btn").off("click").on("click", function(){ autoplayK(); }); }, 1000); } if (attempts >= maxAttempts) { clearInterval(checkSidesContainer); } }, 500); });
</script>

..............................

ciao

.

Hello KolAsim,

wow, next step! I fixed the vimeo settings and now all videos work in showboxes. But since the new code the menu and the sticky bar dont work properly. The hamburger menu kicks in when I have opened a video, no matter which.

Can you check please?

Thank you!

Thomas

PS: On the mobile phone the opening of a video now causes that the hamburger menu is opening on the opposite side and in a different layout - strange...

...I don't know why this phenomenon occurs......
...I saw that you could remove the StickyBar and make the header bar fixed. If you're interested, let me know...
...In the meantime, you need to fix the menu by checking the various breakpoints, because it's coming out of the layout...

.

.

ciao...

.

you are right - the menu was outside the border. I fixed it now. But it is still not working. The strange thing is, the the vimeo gallery on the home page doesnt trigger that effect. The menu remains intact there. Only the animated image into showbox causes it to crash.

... I'm sorry, ...I don't know why this phenomenon occurs...
... You could fix it as described above, no StickyBar  and fixed HEADER...
...To try, paste this code into the videos page under Properties | Expert /HEAD:

<style>
#imHeader {position:fixed !important;z-index:100000 !important;width:100% !important}
#imStickyBarContainer{display:none !important}
</style>

.

ciao

.

Sorry, still no change. May I ask you to check your last code for animated images / showbox? The problem definitely ocurred with it. And I dont understand, why the other code for the vimeo gallery has no impact on the menu. Could it have to do with an involuntary resize of the frame? 

I am happy that the videos work now and would be very very happy, if the menu would stay intact also...!

...I'll try to do some checks tomorrow, if I find any solutions I'll let you know...

ciao

thank you!!

...!... sorry, it's important, ...to be able to verify and run tests to hopefully pinpoint the problem, you need to remove the SCRIPT and STYLE code you entered on that problematic page...!...
.
Bye, ciao

.

just to understand it right. I have entered the code in the general settings (1) section, not on one specific site. I delete it from there, ok?

.... the code must be inserted in Step_3 on the respective pages, for which I created it for you each time...
... now on this page [https://narrevo.com/story-factory.html] I see two scripts and not just the dedicated script, so they may be conflicting.
... so I can evaluate it, you must delete the code reported in my STAMP, then I can start from scratch. Bye:

.

sorry! 

I removed the code. Right now for testing I also put your last code (your post from 7.11., 22:34) in the page properties (step 3) of Story Factory before the /head tag - same result as before. Hamburger symbol pushing the menu down in a second line outside the header frame.

ciao

... good, I saw you cleaned up the old code, so I could make some assessments...
... I think I've identified the cause of the problem...
... I've developed this new invention, and I've managed to merge the first two codes together...
... in theory, this new code, in a single solution, could work for all your pages containing VIMEO videos that start when you click on the preview...
... they should all be visible in the ShowBox, with video autoplay and automatic sound/audio start...
... you'll do all the actual checks...

<script> /** -- video Vimeo in ShowBox+Autoplay+Audio automatico x WSx5 by KolAsim --**/ $(function() { function waitForSwiper(maxAttempts = 10, interval = 500) { let attempts = 0; const checker = setInterval(function() { const $swiper = $(".sides-container, .swiper-container"); if ($swiper.length > 0 && $swiper.is(":visible")) { clearInterval(checker); setTimeout(initHandlers, 1000); } else { attempts++; if (attempts >= maxAttempts) { clearInterval(checker); } } }, interval); } function initHandlers() { $(".btn, .swiper-container").off("click").on("click", function() { autoplayK(); }); } function resizeVimeoBox() { const $iframe = $("#imShowBox iframe"); const $box = $("#imShowBox"); if (!$iframe.length || !$box.length) return; const boxWidth = $box.width(); const videoHeight = Math.round(boxWidth * 9 / 16); $iframe.css({ position: "absolute", top: 0, left: 0, width: "100%", height: videoHeight + "px", border: 0, zIndex: 1 }); $box.css({ position: "relative", height: videoHeight + "px", overflow: "hidden" }); $("#imShowBoxFullScreenToggle, #imShowBoxClose").css({ display: "block", opacity: 1, visibility: "visible" }); } function restoreHamburgerButtons() { $("#imStickyBar_imMenuObject_11 .hamburger-button, #imHeader_imMenuObject_11 .hamburger-button") .css({ display: "block", opacity: 1, visibility: "visible", pointerEvents: "auto", zIndex: 9999 }); $(".hamburger-menu, .menu-toggle, .imMenuHamburger") .css({ opacity: 1, visibility: "visible", pointerEvents: "auto", zIndex: 9999 }); } function autoplayK() { setTimeout(function() { const $iframe = $("#imShowBox iframe"); if (!$iframe.length) return; try { let src = $iframe.attr("src"); let url = new URL(src); url.searchParams.set("autoplay", "1"); url.searchParams.set("muted", "0"); $iframe.attr("src", url.toString()); } catch (e) { let url_videoK = $iframe.attr("src"); url_videoK = url_videoK.replace("muted=1", "muted=0"); if (!url_videoK.includes("autoplay=1")) { url_videoK += (url_videoK.includes("?") ? "&" : "?") + "autoplay=1"; } $iframe.attr("src", url_videoK); } $(".clear-button-style").hide(); resizeVimeoBox(); setTimeout(restoreHamburgerButtons, 800); }, 1000); } $(document).on("click", "#imShowBoxClose", function() { setTimeout(function() { $("#imShowBox, #imShowBoxBackground, #imShowBoxOverlay, #imShowBoxContainer") .css({ display: "none", opacity: 0, visibility: "hidden", zIndex: 0 }); restoreHamburgerButtons(); }, 800); }); waitForSwiper(); }); </script>

................................

ciao

.

++ EXTRA - channelmode FullScreen - fine - a scatola chiusa ...

<script> /** -- video Vimeo in ShowBox+Autoplay+Audio automatico x WSx5-finale by KolAsim --**/ $(function() { function waitForSwiper(maxAttempts = 10, interval = 500) { let attempts = 0; const checker = setInterval(function() { const $swiper = $(".sides-container, .swiper-container"); if ($swiper.length > 0 && $swiper.is(":visible")) { clearInterval(checker); setTimeout(initHandlers, 1000); } else { attempts++; if (attempts >= maxAttempts) clearInterval(checker); } }, interval); } function initHandlers() { $(".btn, .swiper-container").off("click").on("click", function() { autoplayK(); }); } function resizeVimeoBox() { const $iframe = $("#imShowBox iframe"); const $box = $("#imShowBox"); if (!$iframe.length || !$box.length) return; const boxWidth = $box.width(); const videoHeight = Math.round(boxWidth * 9 / 16); $iframe.css({ position: "absolute", top: 0, left: 0, width: "100%", height: videoHeight + "px", border: 0, zIndex: 1 }); $box.css({ position: "relative", height: videoHeight + "px", overflow: "hidden" }); $("#imShowBoxFullScreenToggle, #imShowBoxClose").css({ display: "block", opacity: 1, visibility: "visible" }); } function restoreHamburgerButtons() { $("#imStickyBar_imMenuObject_11 .hamburger-button, #imHeader_imMenuObject_11 .hamburger-button") .css({ display: "block", opacity: 1, visibility: "visible", pointerEvents: "auto", zIndex: 9999 }); $(".hamburger-menu, .menu-toggle, .imMenuHamburger") .css({ opacity: 1, visibility: "visible", pointerEvents: "auto", zIndex: 9999 }); } function autoplayK() { setTimeout(function() { const $iframe = $("#imShowBox iframe"); if (!$iframe.length) return; try { let src = $iframe.attr("src"); let url = new URL(src); url.searchParams.set("autoplay", "1"); url.searchParams.set("muted", "0"); $iframe.attr("src", url.toString()); } catch (e) { let url_videoK = $iframe.attr("src"); url_videoK = url_videoK.replace("muted=1", "muted=0"); if (!url_videoK.includes("autoplay=1")) { url_videoK += (url_videoK.includes("?") ? "&" : "?") + "autoplay=1"; } $iframe.attr("src", url_videoK); } $("#imShowBox .clear-button-style").hide(); resizeVimeoBox(); setTimeout(restoreHamburgerButtons, 800); setTimeout(activateFullscreenObserver, 1000); }, 1000); } $(document).on("click", "#imShowBoxClose", function() { setTimeout(function() { $("#imShowBox, #imShowBoxBackground, #imShowBoxOverlay, #imShowBoxContainer") .css({ display: "none", opacity: 0, visibility: "hidden", zIndex: 0 }); restoreHamburgerButtons(); $("#imShowBox, #imShowBox div, #imShowBox iframe").removeClass("classFullScreen"); }, 800); }); function activateFullscreenObserver() { const btn = document.querySelector("#imShowBoxFullScreenToggle"); if (!btn) { return; } if (!document.querySelector("#customFullscreenStyle")) { $("head").append(` <style id="customFullscreenStyle"> .classFullScreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; z-index: 999998 !important; /* più basso dei pulsanti */ background: #000 !important; } /* Mantieni visibili i controlli */ #imShowBoxFullScreenToggle, #imShowBoxClose { position: fixed !important; top: 10px !important; right: 40px !important; z-index: 999999 !important; opacity: 1 !important; visibility: visible !important; display: block !important; cursor: pointer !important; } #imShowBoxClose { right: 10px !important; } </style> `); } const toggleFullscreenStyle = (label) => { const $targets = $("#imShowBox, #imShowBox div, #imShowBox iframe"); if (label && label.toLowerCase().includes("vollbild")) { $targets.removeClass("classFullScreen"); } else if (label && label.toLowerCase().includes("beenden")) { $targets.addClass("classFullScreen"); $("#imShowBoxFullScreenToggle, #imShowBoxClose").css({ position: "fixed", top: "10px", right: "40px", zIndex: 999999, display: "block", opacity: 1, visibility: "visible", cursor: "pointer" }); } }; const observer = new MutationObserver((mutations) => { mutations.forEach((m) => { if (m.type === "attributes" && m.attributeName === "aria-label") { const newLabel = btn.getAttribute("aria-label"); toggleFullscreenStyle(newLabel); } }); }); observer.observe(btn, { attributes: true }); } waitForSwiper(); });/**K**/</script>

...........................

.

ciao

.

Hello, thank you very much for your effort - but it still doesnt work. I attach here fotos. Please check the menu before, during and after the click. I tried both codes one after another in the general properties (1) as well as in the site properties (3) and checked in three different browsers. Always the same result.

normal menu

after the loading of the showbox is completed...

and after closing the showbox

...I'll try to do a new test tomorrow, but it worked in my simulation, I'll let you know...

.

ciao

.

...try applying the code to one of your pages to test...
...in the meantime, I tested it here, and it seems to work well:
> https://kolasim.websitex5.me/vimeo_plus_k/index.html

.

ciao

.

Hello KolAsim,

now I found the problem: It is the sticky bar. I used your code for the static menu bar again. Now it works. 

It is not perfect because I liked the sticky bar, but it is okay. And I am very happy, that the videos finally work.

If you should find out something about the sticky bar issue, please let me know!

Many thanks and have a good day

Thomas

ciao, ... OK... I looked at your pages and noticed that you achieved excellent results, unthinkable without my code, and it's even better than my examples...
... anyway, in my examples the hamburger doesn't disappear, it works properly...
... the fixed header at the top is a good solution, (!) but to be less invasive and behave almost like the StickyBar, since you've become quite expert by now, you could pair it with my EXTRA code for a floating bar, or, perhaps even simpler, use the very nice code proposed by Daniel, which you can find here:
https://helpcenter.websitex5.com/pt/post/273742

.
Hi , ciao

.