Although the upshot tin hold upwards real master copy as well as attractive, I must state it has iii drawbacks: they tin non hold upwards silenced, if the video has ads, they volition also appear, as well as it tin irksome the loading fourth dimension of the blog, as well as thence if anyone wants to utilization it, may consider putting it exclusively on exceptional occasions, or on blogs that charge real quickly.
Also it tin hold upwards done inward HTML5, the work amongst this method is that you lot require to charge the video inward 3 dissimilar formats (.mp4, .webm as well as .ovg) along amongst a film for browsers that create non back upwards them, as well as thence this YouTube selection seems to a greater extent than practical to me, despite the drawbacks.
You tin run into it working on this demo blog
Steps
1. The get-go pace is to simply to a higher house the </head> tag, this script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>And this ane too:
<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* past times Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed nether the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */
var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';
jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);
jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You require Flash histrion 8+ as well as JavaScript enabled to thought this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});
var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;
var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';
jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
provide this;
}
business office onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
business office resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}
//]]>
</script>
<script type='text/javascript'>2. Then locate the <body> tag (CTRL + F)
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>
Or if you lot are using a template from Template Designer, uncovering this line:
<body expr:class='"loading" + data:blog.mobileClass'>3. Under either of these two, add together this:
<div id='wrapper-video'>4. Now search for the </body> tag, as well as earlier it pose this:
</div>Save the changes as well as that's it. In cherry-red you lot must pose the ID of Youtube video, the ID are the characters that look at the destination of the URL:
Remember: There is no selection to mute, as well as thence if you lot don't desire to accept audio equally inward the demo blog, you lot accept to select a video that has no sound. I also recommend using a video inward hard disk inward illustration you lot don't desire whatsoever dark parts to present to a greater extent than or less it.
If you lot are using jQuery, take other versions that you lot accept to avoid duplication as well as accept problems.
Author | jQuery Tubular
Comments