Skip to main content
戰勝懼怕的禱告- 葉卿雯牧師 - 華人雲端基督教會 gloryw.org/禱告視頻/戰勝懼怕的禱告 - 葉卿雯牧師title><br />
<meta name="description" content="華人雲端基督教會線上影音平台 - 共享福音、聖經教導與屬靈生命見證。"><br />
<meta name="keywords" content="華人雲端基督教會, gloryw.org, 葉卿雯牧師,戰勝懼怕的禱告,基督教, 福音, 聖經, 講道, 詩歌, 靈修, 基督徒, 線上教會,禱告視頻"><br />
<meta name="author" content="華人雲端基督教會"></p>
<!-- Open Graph / Facebook SEO --><p> <meta property="og:type" content="video.other"><br />
<meta property="og:title" id="og-title" content="華人雲端基督教會 精彩影片"><br />
<meta property="og:description" content="點擊觀看精彩福音影音內容，分享屬靈生命恩典。"><br />
<meta property="og:url" content="https://gloryw.org/"><br />
<meta property="og:image" content="https://gloryw.org/logo.png"> </p>
<!-- 請替換為您的預設分享縮圖 URL --><p> <meta property="og:site_name" content="華人雲端基督教會 gloryw.org"></p>
<!-- Twitter SEO --><p> <meta name="twitter:card" content="summary_large_image"><br />
<meta name="twitter:title" id="twitter-title" content="華人雲端基督教會 精彩影片"><br />
<meta name="twitter:description" content="點擊觀看精彩福音影音內容，分享屬靈生命恩典。"><br />
<meta name="twitter:image" content="https://gloryw.org/logo.png"></p>
<style>
/* CSS 變數：建構靈活的明亮與暗黑模式 */
:root {
--bg-color: #fafafa;
--text-color: #1a1a1a;
--wrapper-bg: #ffffff;
--footer-bg: #f5f5f5;
--footer-text: #666666;
--border-color: #e0e0e0;
--shadow-color: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #ffffff;
--wrapper-bg: #1e1e1e;
--footer-bg: #1a1a1a;
--footer-text: #aaaaaa;
--border-color: #2c2c2c;
--shadow-color: rgba(0, 0, 0, 0.4);
}
/* 基礎全域重設 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 控制列：放置切換按鈕 */
.header-controls {
width: 100%;
max-width: 960px;
margin: 20px auto 0 auto;
padding: 0 20px;
display: flex;
justify-content: flex-end;
}
/* 模式切換按鈕設計 */
.theme-toggle-btn {
background: var(--wrapper-bg);
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 8px 14px;
border-radius: 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 2px 8px var(--shadow-color);
}
.theme-toggle-btn:hover {
opacity: 0.9;
}
.theme-toggle-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* 主要內容區塊 */
.container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
width: 100%;
}
.video-wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
/* 動態影片標題顯示區（預設隱藏，由 JS 獲取標題後自動填入並展現） */
.video-title-display {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
display: none;
padding-left: 8px;
border-left: 4px solid var(--text-color);
}
/* 完美 16:9 響應式影片容器 */
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background-color: #000;
box-shadow: 0 12px 35px var(--shadow-color);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-color);
}
/* 針對不支援 aspect-ratio 的舊版瀏覽器備用方案 */
@supports not (aspect-ratio: 16 / 9) {
.video-container {
padding-top: 56.25%;
height: 0;
}
.video-container #player {
position: absolute;
top: 0;
left: 0;
}
}
.video-container #player {
width: 100%;
height: 100%;
border: 0;
}
/* 頁尾樣式：支持 `<br>` 換行排版 */
footer {
background-color: var(--footer-bg);
text-align: center;
padding: 25px 20px;
font-size: 14px;
color: var(--footer-text);
line-height: 1.6;
border-top: 1px solid var(--border-color);
letter-spacing: 0.5px;
}
footer a {
color: var(--text-color);
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}
</style><p></head></p>
<!-- 預設設為 dark（暗黑模式），可自由更改為 light --><p><body data-theme="dark"></p>
<!-- 頂部切換按鈕區 --><div class="header-controls">
<button class="theme-toggle-btn" id="themeToggle" aria-label="切換深淺模式"></p>
<!-- 預設為暗黑模式時，按鈕圖示顯示太陽，點擊後切換至明亮模式 --><svg id="theme-icon" viewBox="0 0 24 24">
<!-- Sun Icon -->
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41l-1.06-1.06zm1.06-12.37c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.38.39-1.02 0-1.41zm-12.37 12.37c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.38.39-1.02 0-1.41z"/>
</svg><p> <span id="theme-text">切換明亮模式</span><br />
</button>
</div>
<!-- 主要內容區 --><p> <main class="container"></p>
<div class="video-wrapper">
<!-- 網頁前端動態影音標題展示區 --><h1 class="video-title-display" id="videoTitle">載入中...</h1>
<div class="video-container">
<!-- YouTube API 將在此處動態生成安全內嵌播放器 --><div id="player"></div>
</div>
</div>
<p> </main></p>
<!-- 頁尾區塊 --><footer>
<p>© 2026 <a href="https://gloryw.org" target="_blank">華人雲端基督教會<br>gloryw.org</a></p>
</footer>
<!-- === JavaScript 自動化核心邏輯 === --><script>
// ==========================================
// 【核心設定】請在此處替換您每頁想播放的 YouTube 影片 ID
// ==========================================
const YOUTUBE_VIDEO_ID = 'MNYMAdRtNPU';
// 非同步載入 YouTube Iframe Player 官方 API
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player;
// API 載入完成後會自動呼叫此標準函式
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: YOUTUBE_VIDEO_ID,
playerVars: {
'playsinline': 1, // 關鍵：防止 iOS Safari 自動喚起原生全螢幕播放，維持網頁結構
'rel': 0 // 影片結束時僅推薦自家頻道的影音
},
events: {
'onReady': onPlayerReady
}
});
}
// 當播放器與影片資料加載完畢後觸發
function onPlayerReady(event) {
try {
// 利用 YouTube Player API 內部方法動態獲取當前影片數據
const videoData = player.getVideoData();
if (videoData && videoData.title) {
const videoTitle = videoData.title;
const siteSuffix = " - 華人雲端基督教會 gloryw.org";
// 1. 【自動優化】動態重設網頁瀏覽器標題 <title>
document.title = videoTitle + siteSuffix;
// 2. 【自動優化】動態更新 SEO Open Graph 與 Twitter Meta 標題
const ogTitleMeta = document.getElementById('og-title');
const twTitleMeta = document.getElementById('twitter-title');
if (ogTitleMeta) ogTitleMeta.setAttribute('content', videoTitle);
if (twTitleMeta) twTitleMeta.setAttribute('content', videoTitle);
// 3. 【頁面展現】將影片標題同步渲染到網頁頁面上
const titleElement = document.getElementById('videoTitle');
if (titleElement) {
titleElement.innerText = videoTitle;
titleElement.style.display = 'block'; // 顯現標題
}
}
} catch (error) {
console.error("無法自動讀取 YouTube 影片標題資信: ", error);
// 降級防護機制：若因網路限制未取得標題，維持原站點標題
document.title = "精選影音分享 - 華人雲端基督教會 gloryw.org";
}
}
// 明亮與暗黑模式 (Light/Dark Mode) 切換核心邏輯
const themeToggleBtn = document.getElementById('themeToggle');
const bodyElement = document.body;
const themeIcon = document.getElementById('theme-icon');
const themeText = document.getElementById('theme-text');
// 定義標準 SVG 向量圖形路徑
const sunIconPath = `<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41l-1.06-1.06zm1.06-12.37c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.38.39-1.02 0-1.41zm-12.37 12.37c-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.38.39-1.02 0-1.41z"/>`;
const moonIconPath = `<path d="M12.3 2a10 10 0 0 0-1.9 19.8 10 10 0 0 0 11.8-11.8 10 10 0 0 1-9.9-8z"/>`;
themeToggleBtn.addEventListener('click', () => {
const currentTheme = bodyElement.getAttribute('data-theme');
if (currentTheme === 'dark') {
bodyElement.setAttribute('data-theme', 'light');
themeIcon.innerHTML = moonIconPath;
themeText.innerText = '切換暗黑模式';
} else {
bodyElement.setAttribute('data-theme', 'dark');
themeIcon.innerHTML = sunIconPath;
themeText.innerText = '切換明亮模式';
}
});
</script><p></body><br />
</html></p>
