0

Not really sure how to go about doing this.

  1. In an ideal world I would like to be able to have several YouTube videos on one page and then have users come to my site via a provided link.
  2. Depending on the link the where given it would load a different YT video on page load.
  3. Sample link provided to user: 'mysite.com/videopage.html?PlayAd=ABC' or 'mysite.com/videopage.html?PlayAd=XYZ'
  4. If they just come to the site without the added URL parameter, no video would play and instead they would self select.

[code]

<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox();
        $('.fancybox-media')
            .attr('rel', 'media-gallery')
            .fancybox({
                openEffect : 'none',
                closeEffect : 'none',
                prevEffect : 'none',
                nextEffect : 'none',

                arrows : false,
                helpers : {
                    media : {},
                    buttons : {}
                }
            });
    });


    function autoClick1() { 
    document.getElementById('onload1').click();
    } 
    function autoClick2() { 
    document.getElementById('onload2').click();
    } 

</script>
</style>
</head>
<body onLoad="autoClick1();autoClick2();">
<ul>
  <li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo" id="onload1">Youtube</a></li>
  <li><a class="fancybox-media" href="http://www.youtube.com/watch?v=hnBN1Epc5qs" id="onload2">Youtube2</a></li>
</ul>

My example is using onLoad which just allows the last video to play. It also plays the video without a URL parameter so it plays on every page load. I have no idea how to do this. Any help is appreciated!

My demo site: http://www.echristo.com/bay/test/demo/index.html

echristo66
  • 198
  • 1
  • 14
  • Check http://stackoverflow.com/a/9030970/1055987 if that helps – JFK Apr 29 '14 at 06:02
  • Brilliant. Worked! Not sure how I missed that one on all my searches, thanks JFK!!! How do I change the 'page.html#image01' to something like 'page.html?PlayAd=ABC' ... the hash tag works great, but some email clients remove hashes, therefore users clicking on the link from an email would not see the video overlay on page load. – echristo66 Apr 29 '14 at 16:04
  • I guess it would be easier with php like `page.php?PlayAd=ABC` and use `$_GET['PlayAd']` to get the input (ABC), then trigger a `click` via jQuery on the specific selector. You may need some `switch` statement for the logic. – JFK Apr 29 '14 at 16:19

0 Answers0