I just got this code which allows to load the video embeb only after the page loaded its content so the user would be something loading and not just a wite page for the next 4 or 5 seconds.
css-tricks.com/how-to-fix-video-slowing-down-page-load-time/
<div id="movie-area">
</div>
#movie-area {
width: 320px;
height: 240px;
background: black;
}<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(window).bind("load", function() {
$('#movie-area').load('movie.html');
});
</script>
This is my item video Area
<div class="itemVideoBlock">
<?php if($this->item->videoType=='embedded'): ?>
<div class="itemVideoEmbedded">
<?php echo $this->item->video; ?>
</div>
<?php else: ?>
<span class="itemVideo"><?php echo $this->item->video; ?></span>
<?php endif; ?>
<?php if($this->item->params->get('itemVideoCaption') && !empty($this->item->video_caption)): ?>
<span class="itemVideoCaption"><?php echo $this->item->video_caption; ?></span>
<?php endif; ?>
<?php if($this->item->params->get('itemVideoCredits') && !empty($this->item->video_credits)): ?>
<span class="itemVideoCredits"><?php echo $this->item->video_credits; ?></span>
<?php endif; ?>
<div class="clr"></div>
</div>
The problem is that i have no idea how to implement this since my page has around 6k videos embedded and i wont be creating htmls for all these videos i know it has to be a better way.
Thx in advance.
