1 페이지 웹사이트 제작(1Page website creation) – 3

유투브 플레이어 Youtube Player(index.html)

제가 소개해 드리는 이 내용들은 YouTube Player부분입니다.
These contents I am introducing are part of the YouTube Player.

1)파일 위치 file location
– index.html과 YouTubePlayer.php파일의 위치는 동일한 디렉토리에 위치 합니다.
– 이번 포스트에서 index.html부분을 소개해드리고 다음 포스트에서 YouTubePlayer.php파일에 대해서 소개 해 드리겠습니다.
– The index.html and YouTubePlayer.php files are located in the same directory.
– I will introduce the index.html part in this post and the YouTubePlayer.php file in the next post.

2) 변수전달 Passing variables
– 아래의 videoID는 index.html파일에서 버튼을 클릭했을 때 GET방식의 변수로 YouTubePlayer.php에 값을 전달하는 변수 입니다.
– eventID는 유투브 영상의 자동 재생을 위한 변수 입니다. eventID = 1이면 자동재생, 0이면 자동재생되지 않습니다.
– The videoID below is a GET method variable whose value is passed to YouTubePlayer.php when the button is clicked in the index.html file.
– eventID is a variable for automatic playback of YouTube videos. If eventID = 1, it will autoplay. If it is 0, it will not autoplay.

videoID=<Youtube Video ID>
eventID = 0 or 1

<button type="button"  onclick="changeIframeSource('./YouTubePlayer.php?videoID=13KaL-yfnjM&eventID=1')">▶</button>

3)iframe
– index.html파일에 iframe내부에 YouTubePlayer.php파일을 불러 옵니다. 아래 코드는 나중에 수정될 수도 있습니다.
– Load the YouTubePlayer.php file inside the iframe in the index.html file. The code below may be modified later.

<iframe id="yplayer" type="text/html" width="640" height="360" src="./YouTubePlayer.php"
 frameborder="0" scrolling="no"></iframe>

4)주요 코드 main code

<html>
....
<body>
...	
<div class="item"><a href="img/gallery/536×536thebeautyofbattle.png" title="The beauty of battle" data-lightbox-gallery="gallery1">
		<img src="img/gallery/536×536thebeautyofbattle.png" class="img-responsive " alt="img"></a>
		<button type="button"  onclick="changeIframeSource('./YouTubePlayer.php?videoID=13KaL-yfnjM&eventID=1')">▶</button>
</div>	
...
<section id="YouTubeplayer" class="home-section text-center">
                <!-- youtube iframe player API: https://developers.google.com/youtube/iframe_api_reference?hl=ko#Getting_Started-->
                <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
                <!--<div id="player"></div> width="640" height="360"//-->

                <iframe id="yplayer" type="text/html" width="640" height="360"
                src="./YouTubePlayer.php"
                frameborder="0" scrolling="no"></iframe>
	
</section>
...
</body>
</html>

유투브 플레이어 Youtube Player(index.html)

Leave a Reply Cancel reply