Use app styling for simple links

[Lionn_Man]

The idea is to be able to use the modal style in links

For example,

If I have a blog and mark a link to a video in my text, the application understands that there is a link mark and opens the modal with the defined style

Possibility of incorporating CSS and JS into links anywhere on the website, making it easier to use the video modal.

If I mark a link, be it simple text or a button, for example with ID = “youtube-gallery”

the application understands that I want to open the modal in the style defined in my app.

[Max]

Hi there, @Lionn_Man

You see, even if you copy the link to the video from the widget (using the Share button), it still will be a link to the video on YouTube, but not to the YouTube video in the widget.

Thus, if you add a link to the YouTube video to your blog, it won’t be anyhow connected to the widget.

If you want to direct users from your blog to your YouTube Gallery widget, the only workaround is to add a link to the page where it’s installed.

Let me know if this clarifies things or of you have any questions left

[Lionn_Man]

Hello!

Thank you for the response.

In this case I have a page for example >>>

Radio:X FM

I want that when clicking on the link

01:16 | Helmet - “Unsung”

Open the “elfsight” modal

did you understand ?

I’m working on a Magento 2 project and it would be interesting to have this feature available

[Max]

If you just want to open your YouTube Gallery widget when clicking Helmet - “Unsung”, you can use the widget’s Share Link from your dashboard:

Check it out and let me know if it worked for you

[Lionn_Man]

Hello,

Friend, that’s not it…

What I need is:

When clicking on the link, open YouTube via modal

If you do a test on my page you will see that the link works, but it opens in another window…

[Max]

Got it! You’re using YouTube embed links to specific videos, and you want to open them in a popup on the same tab.

The thing is that we can definitely assist with any widget-related issues or requests, but when it comes to such non-related cases, it’s a bit tricky to provide direct recommendations.

However, I’ve asked ChatGPT for a potential solution, so feel free to give it a try

[Max]

Response from GPT:

It’s possible to make the YouTube embed link open in a popup on the same tab instead of opening a new tab. To achieve this, you can use JavaScript to prevent the default behavior of opening a new tab and instead open the video in a popup.

Here is an example of the code you can use:

1. HTML: Create the YouTube embed link.

<a href="https://www.youtube.com/watch?v=VIDEO_ID" class="youtube-popup">Watch Video</a>

2. CSS: Style the popup (this can be a modal window).

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: white;
    padding: 20px;
    width: 80%;
    max-width: 800px;
    position: relative;
}

.popup iframe {
    width: 100%;
    height: 400px;
}

.popup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

3. JavaScript: Add functionality to open the popup.

document.querySelector('.youtube-popup').addEventListener('click', function(e) {
    e.preventDefault();  // Prevent default link behavior
    var videoURL = this.href;
    var popup = document.createElement('div');
    popup.classList.add('popup');

    var popupContent = `
        <div class="popup-content">
            <span class="close">&times;</span>
            <iframe src="${videoURL}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    `;
    popup.innerHTML = popupContent;
    document.body.appendChild(popup);

    // Close the popup
    popup.querySelector('.close').addEventListener('click', function() {
        document.body.removeChild(popup);
    });

    // Close the popup if clicked outside
    popup.addEventListener('click', function(e) {
        if (e.target === popup) {
            document.body.removeChild(popup);
        }
    });
});

This code will open the video in a modal window on the same tab when the user clicks the link. You can adapt the styles to your design.

[Lionn_Man]

Hello,

Thanks for the answer.

Your tip doesn’t work.

I’m using Magento 2, in which case I’d like to use your JS and CSS directly in my module.

For example, in the link below,

YouTube ||| Lionn

you can see that when you click on the video, the modal opens perfectly.

So I want to take advantage of your JS and CSS, not have to create a js, you know?

ChatGPT can’t give me any tips on this… it’s no use.

I need to use the JS and CSS from youtube-gallery natively in my project according to the scenario I gave you.

Is there any documentation for Magento developers?

Sorry, but if you are not a developer it is difficult to help me…

Thank you very much!

[Max]

Hi, @Lionn_Man

I completely get your idea, but, unfortunately, there is no way to implement this feature using our YouTube Gallery app (even with the Custom JS/CSS sections).

However, we’ve double-checked things with the devs, and they’ve suggested using our Popup widget for this purpose.

The thing is that you should create a separate Popup widget for each link. So, if you have 15 links, you’ll need 15 Popup widgets.

Here is what should be done:

Assign IDs to your YouTube links

You should manually assign any IDs to YouTube links. Here is an example of how it should look:

Add a video to the Popup widget

Add a Video block to your Popup widget and insert a link to the YouTube video:

Setting the Trigger

1. Open the Triggers section on the Settings tab:

2. Choose On Click and add the ID you’ve assigned to your YouTube link in the step 1:

Installation

Install your Popup widget to the page where you’d like to open the links

You’re very welcome to try it out and if any questions come up, we’re always here to help

[Lionn_Man]

Hello!

Thank you very much.

Your tip doesn’t solve my problem.

I’ll explain why.

The project may have several links to YouTube, so it is impossible to do this manually.

The idea is to create a module for Magento 2 to control links that are marked as “youtube-modal”, so the module takes care of doing this automatically…

I thought it was possible to use your JS or CSS

https://static.elfsight.com/apps/yottie/stable/eb5a298ede416be9499060a9dda05f5ab2747f8d/app/yottie.js

So, for the future, it would be interesting to have something for Magento 2.

[Max]

Got your point, but, unfortunately, it’s the only solution for now.

Your use case seems to be quite custom, but anyway, I’ve moved this idea to the Wishlist. If more users support this request, it might be considered in the future