const iframeSrcList = [
	'https://www.youtube.com/embed/V0XUd8f2pz8',
	'https://www.youtube.com/embed/Vno_QG_LENE'
];

const iframe = document.getElementById('iframe');
let iframeSrc = '';
let iframeSrcIndex = true;

// 改變 iframe src
function checkIframeSrc() {
	iframeSrcIndex ? iframeSrc = iframeSrcList[1] : iframeSrc = iframeSrcList[0];
	iframeSrcIndex = !iframeSrcIndex;
}

// 改變 iframe src - 會增加 history
function changeIframe() {
	checkIframeSrc();
	iframe.src = iframeSrc;
	setTimeout(calHistoryLength, 400);
}

// 改變 iframe src - 不會增加 history
function changeIframeBetter() {
	checkIframeSrc();
	const iframeWrap = document.getElementById('iframe-wrap');
	let iframe = `<iframe width="336" height="189" src="${iframeSrc}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>`;
	iframeWrap.innerHTML = iframe;
	setTimeout(calHistoryLength, 400);
}

// 計算 history length
const historyLengthEl = document.getElementById('historyLength');
function calHistoryLength() {
	historyLengthEl.textContent = history.length;
}

// 點擊會增加的按鈕
const btnUsually = document.getElementById('usually');
btnUsually.addEventListener('click', changeIframe, false);

// 點擊不會增加的按鈕
const btnBetter = document.getElementById('better');
btnBetter.addEventListener('click', changeIframeBetter, false);

// 先執行一次計算 history length
calHistoryLength();