嵌入Youtube视频小尺寸但仍然高清质量

时间:2016-06-19 21:12:05

标签: javascript html css youtube

在Blogger.com上将YouTube嵌入我的博客时遇到问题。我想要一个尺寸如下的视频仍然以高清播放。我认为我的问题是不知道我需要改变什么,然后在我的博客中发布代码的位置。

我一直在阅读并尝试超过6个小时但仍然无法获得它。

width="655" 
height="380"

我从biostall找到了声音有用的代码,但无法让它为我工作。我将JS代码放入我博客上的JS / HTML小工具中,然后将HTML发布到一个新帖子中,并尝试使用两种设置发布它,直接显示HTML和解释类型化的HTML。

有一个非常有用的代码 from biostall

HTML:

<div id="player"></div>  

Javascript:

// 1. 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);  

// 2. This function creates an <iframe> (and YouTube player) after the API code downloads.  
var player;  
function onYouTubeIframeAPIReady() {  
    player = new YT.Player('player', {  
        height: '1280',  
        width: '720',  
        videoId: 'E37YNMYlKvo',  
        events: {  
            'onReady': onPlayerReady  
        }  
    });  
}  

// 3. The API will call this function when the video player is ready.  
function onPlayerReady(event) {  
    player.setPlaybackQuality('hd1080'); // Here we set the quality (yay!)  
    event.target.playVideo(); // Optional. Means video autoplays  
}  

1 个答案:

答案 0 :(得分:0)

所以你有一个带有props height,width,videoId,events

的对象YT.Player

尝试更改为

height: '380' 

width: '655' 

所以

var player;  
function onYouTubeIframeAPIReady() {  
    player = new YT.Player('player', {  
        height: '380',  
        width: '655',  
        videoId: 'E37YNMYlKvo',  
        events: {  
            'onReady': onPlayerReady  
        }  
    });  
} 

...

保持player.setPlaybackQuality('hd1080'); // Here we set the quality (yay!)

因为它设定了质量

顺便说一句,你有两种'类型'720p和1080p

概括

仅更改高度和宽度