Fix Youtube overlay prettyphoto/fancybox

ffwd · July 5, 2012, 12:00am

I was struggling when i found that when you opened an image on prettyphoto and you had an embed youtube video at the description it would show over the pics…after googling and trying i found 2 options to fix this.

Option 1

add

&wmode=opaque

at the end of the iframe url of the embed code

Option 2

i found this method because i did not want to go to all the embed videos i had and modify them, so this you do not need to add the &wmode=opaque to the url it will do it automatically

You have to create a file named scripts.post.tpl at this folder skins/YOU_SKIN/customer/addons/my_changes/hooks/index/

The file should contain this:

```php

{literal}

{/literal}

```

This code was found at http://maxmorgandesi…z_index_issues/

I am be no mean a coder so if there is someone who knows of a better way please post it

colortone · July 5, 2012, 12:00am

I don't know if this will help, but I found the same overlay problem in wordpress and the solution was to add:

allowtransparency="true"

in youtube embed code, example:

</code></pre>
        </div>

        <meta itemprop='headline' content='Fix Youtube overlay prettyphoto/fancybox'>

        <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
           <meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
           <meta itemprop="userInteractionCount" content="0" />
           <span class='post-likes'></span>
         </div>

         <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
            <meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
            <meta itemprop="userInteractionCount" content="0" />
          </div>

      </div>






    </div>
    <footer class="container wrap">
  <nav class='crawler-nav'>
    <ul>
      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
        <span itemprop='name'>
          <a href='/' itemprop="url">Home </a>
        </span>
      </li>
      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
        <span itemprop='name'>
          <a href='/categories' itemprop="url">Categories </a>
        </span>
      </li>
      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
        <span itemprop='name'>
          <a href='/guidelines' itemprop="url">FAQ/Guidelines </a>
        </span>
      </li>
      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
        <span itemprop='name'>
          <a href='/tos' itemprop="url">Terms of Service </a>
        </span>
      </li>
      <li itemscope itemtype='http://schema.org/SiteNavigationElement'>
        <span itemprop='name'>
          <a href='/privacy' itemprop="url">Privacy Policy </a>
        </span>
      </li>
    </ul>
  </nav>
  <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p>
</footer>

    
    
  </body>
  
</html>