Hi guys,

Any idea how to use Magnific-Popup to display YouTube videos? I have tried the usual way with cms:do shortcodes but it's not working that way.
This is the code I have:

Code: Select all

<div class="portfolio">
                     <ul>
                        <cms:pages masterpage='talk.php' >
                        <li>
                           <a class="popup-youtube" href="<cms:show videotalk />"><img src="<cms:show fototalk />"></a>
                           <p><cms:show k_page_foldertitle /></p>
                           <h1><a class="popup-youtube" href="<cms:show videotalk />"><cms:show k_page_title /></a></h1>
                        </li>
                        </cms:pages>
                     </ul>
                  </div>

Thanks!

[KK]

Hello atisz,

Please do the following -
1. Begin with a *static* piece of HTML/JS/CSS code that works as expected.

2. Next duplicate that code below the original and Couchify it (use the same values in the editable regions as those those hard-coded in the original above).

3. Do a view-source and both the versions of the code should be *identical*.

Any unexpected difference would give you a clue as to what is going wrong.

This is a standard way of troubleshooting problems in Couch.
Hope it helps you too.

Hello, KK!

I start everytime with static Html..... and couchify it after. This way I'm sure things will work same way in Couchified version too.
In static HTML version things works as expected, here in page source view, the anchor is:

Code: Select all

<a class="popup-youtube" href="http://www.youtube.com/watch?v=ESXgJ9-H-2U"><img src="www.domain.com/images/talk/pic1.jpg"></a>

Couched version's page source view looks like:

Code: Select all

<a class="popup-youtube" href="       <iframe class="youtube-player" type="text/html" width="475" height="350" src="http://www.youtube.com/embed/k69Uj5GBAJw" frameborder="0"></iframe> "><img src="www.domain.com/couch/uploads/image/talk/pic1.jpg"></a>

The problem here is that Couch should generate only the YouTube link (eg. http://www.youtube.com/watch?v=ESXgJ9-H-2U). I tried using in template a simple text editable for the YouTube link, but this way when I want to click on image (pic1) to view the video, the link for it becomes domain.com/http://www.youtube.com/embed/k69Uj5GBAJw. I need to get rid of starting domain.com from that link!

[KK]

Hi Steve,

Quite obviously, editable region 'videotalk' is outputting the wrong link

<a class="popup-youtube" href="<cms:show videotalk />"><img src="<cms:show fototalk />"></a>

<a class="popup-youtube" href=" <iframe class="youtube-player" type="text/html" width="475" height="350" src="http://www.youtube.com/embed/k69Uj5GBAJw" frameborder="0"></iframe> ">

As to why this is happening, I suppose you are trying to use shortcodes in that editable region.

The shortcode (the one we have as sample) is coded to output a standalone IFRAME link so it won't work within an existing link (as is happening).

The easiest solution would be to use a simple editable region of type 'text' and input within it the *full URL* of the video e.g. http://www.youtube.com/watch?v=5PsnxDQvQpw

You said you tried this and it is not working. Well, it really should as there is no reason for anything otherwise. Please make sure you input the full url of the video.

If you still have trouble, please send me the template and I'll test it out.