monk master monk master - 3 months ago 18
HTML Question

Force all youtube video play with 720 hd in html

Anyone can help me to fix this code to force youtube play video with 720 hd?
I tried 4 days but the problem still not solved.
I need play 2 or more videos in one page,below is the codes,the video shows "fake" 720 hd, not true 720 quality,you need adjust the quality manually,what happened of the player?Is it a bug of youtube player bug?

<a class="wp-colorbox-inline" href="#player"><img src="http://www.planwallpaper.com/static/cache/51/5e/515ea22c3b785229fb2afd0fd6ef8c92.jpg" onclick="image_01()" /></a>

<a class="wp-colorbox-inline" href="#player"><img src="http://www.planwallpaper.com/static/cache/b8/14/b81459a5dad107be1518b3238d262ce3.jpg" onclick="image_02()" /></a>

<div style='display:none'>
<div id='player' sytle='padding:10px; background:#fff;'>
<p><script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScripttag = document.getElementsByTagName('script')[0];
firstScripttag.parentNode.insertBefore(tag, firstScripttag);
var player;
var isrunning_01 = false;
var isrunning_02 = false;
function image_01() {
isrunning_01=true;
}
function image_02() {
isrunning_02=true;
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '768',
width: '1024',
videoId: '7YZBNzYwOME',
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange':onPlayerPlaybackQualityChange
}
});
}
function onPlayerReady(event) {
player.setPlaybackQuality('hd720');
if (isrunning_01==true)
{
event.target.cueVideoById({
videoId: 'xhXo7zIKJIc',
suggestedQuality:'hd720'
});
event.target.playVideo();
isrunning_01=false;
}
if (isrunning_02==true)
{
event.target.cueVideoById({
videoId: 'brNH_Z_QLx4',
suggestedQuality:'hd720'
});
event.target.playVideo();
isrunning_02=false;
}
}
function onPlayerPlaybackQualityChange(event) {
player.setPlaybackQuality('hd720');
}
function onPlayerStateChange(event) {
player.setPlaybackQuality('hd720');
}
</script></p>
</div>
</div>


I really don't know how to do that now.
This is the HD example of screenshot

Answer

This code did my job:

// 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '400',
            width: '600',
            videoId: 'VIDEOID',
           // playerVars: { 'autoplay': 1 },
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    // In this case we set the playback quality to 1080p
    function onPlayerReady(event) {
        event.target.setPlaybackQuality('hd720');
    }

There's an example: http://codepen.io/bra1N/pen/RRdWKk