CSS彈出視頻框是一種很好看的設計，它允許你將視頻嵌入到彈出框中并播放。在本文中，我們將介紹如何使用CSS來創建一個這樣的彈出視頻框。

/* CSS代碼 */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-video {
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
width: 600px;
height: 400px;
background-color: #fff;
z-index: 10000;
padding: 20px;
border-radius: 10px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
cursor: pointer;
}

我們首先需要一個包含播放器的div元素，稱之為“video-container”。然后我們使用定位將播放器放在該容器中心。此外，我們還可以使用媒體查詢來使播放器在響應式設計中也始終處于中心，而不是放在一側。

然后，我們需要一個叫做“modal”的div元素，用于顯示彈出框。該元素需要使用css中的“display:none”屬性，以便在加載頁面時不可見。我們還需要將其放在最上層，以便在彈出框被打開時其他元素不可用。

接下來，我們可以編寫JavaScript代碼，以便在點擊鏈接或按鈕時打開彈出框。這里我們使用了jQuery庫，給元素添加了“click()”方法，而后設置“modal”元素的“display”屬性為“block”，表示顯示它。我們還為點擊“close”按鈕添加了關閉彈出框的事件處理程序。

最后，我們可以在彈出框中嵌入你的視頻。你可以使用YouTube的嵌入代碼來添加你的視頻，或者手動添加HTML元素。不論你如何實現，總之，我們首先創建一個包含視頻的div元素，“video-container”，然后使用CSS將它定位在頁面中央。然后，我們使用CSS和JavaScript來實現彈出框的顯示和關閉。