AJAX Video Embeds For Faster Loadig Pages

  • This here is a little hack that will dynamically load your video embed once the user clicks on the given link/image. Let me know if you have any questions. Or if i wrote my code too fast and made a mistake… ??

    1. Newest version of JQuery installed and running

    2. Add the following code to the <head>:

    <script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='imgc']").colorbox({transition:"none", width:"70%", height:"90%"});
//THE HACK:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
$("#vidbox1click-<?php the_ID(); ?>").click(function() { $("#vidbox1-<?php the_ID(); ?>").html('<?php $field = get_post_meta($post->ID, 'vid1', true); if($field) { ?><?php echo $field; ?><?php } ?>'); });
$("#vidbox2click-<?php the_ID(); ?>").click(function() { $("#vidbox2-<?php the_ID(); ?>").html('<?php $field = get_post_meta($post->ID, 'vid2', true); if($field) { ?><?php echo $field; ?><?php } ?>'); });
<?php endwhile; else: ?><?php endif; ?>
});
</script>

    PS. you may notice that i am using colorboxs’ javascript tag to add in my code.

    3. Save your document, and preview your site, if you open up your source code you should see something like this:

    <script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='imgc']").colorbox({transition:"none", width:"70%", height:"90%"});
$("#vidbox1click-711").click(function() { $("#vidbox1-711").html(''); });
$("#vidbox2click-711").click(function() { $("#vidbox2-711").html(''); });
});
</script>

    4. Now go to edit a post from admin, add a custom field with the name “vid1” and “value”:
    <iframe src="https://www.cinshare.com/files/embed/flv/iYPLuRiEMT/l/000000" width="640" height="400" scrolling="no" frameborder="0"></iframe>
    NO SPACES ALLOWED FOR THE VALUE
    And dont worry.. its just an iframe to a south park video embed…

    5. In the post section add the following, replacing the “711” with your post id:

    <div id="vidbox1-711">
<a id="vidbox1click-711">CLICK TO SHOW VIDEO</a>
</div>

    6. Preview the page, click the non-href link, and the video should load.

    You can customize the look of the link in CSS. Note, the sweet thing about this is that the javascript/php hack only creates script for the displayed posts on the page, and not every single post.

    Also, if anyone knows of an easier way to do what i just did PLEASE let me know…

    There you have it.

  • The topic ‘AJAX Video Embeds For Faster Loadig Pages’ is closed to new replies.