{"id":192,"date":"2024-02-19T08:03:05","date_gmt":"2024-02-19T08:03:05","guid":{"rendered":"http:\/\/www.freelifemakers.org\/wordpress\/?p=192"},"modified":"2024-03-10T00:31:28","modified_gmt":"2024-03-10T00:31:28","slug":"1page-website-creation-3","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/02\/19\/1page-website-creation-3\/","title":{"rendered":"1 \ud398\uc774\uc9c0 \uc6f9\uc0ac\uc774\ud2b8 \uc81c\uc791(1Page website creation) \u2013 3"},"content":{"rendered":"\n

\uc720\ud22c\ube0c \ud50c\ub808\uc774\uc5b4 Youtube Player(index.html)<\/h2>\n\n\n\n

\uc81c\uac00 \uc18c\uac1c\ud574 \ub4dc\ub9ac\ub294 \uc774 \ub0b4\uc6a9\ub4e4\uc740 YouTube Player\ubd80\ubd84\uc785\ub2c8\ub2e4.
These contents I am introducing are part of the YouTube Player.

1)\ud30c\uc77c \uc704\uce58 file location<\/strong>
– index.html\uacfc YouTubePlayer.php\ud30c\uc77c\uc758 \uc704\uce58\ub294 \ub3d9\uc77c\ud55c \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc704\uce58 \ud569\ub2c8\ub2e4.
– \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c index.html\ubd80\ubd84\uc744 \uc18c\uac1c\ud574\ub4dc\ub9ac\uace0 \ub2e4\uc74c \ud3ec\uc2a4\ud2b8\uc5d0\uc11c YouTubePlayer.php\ud30c\uc77c\uc5d0 \ub300\ud574\uc11c \uc18c\uac1c \ud574 \ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.
– 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.
<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n


2) \ubcc0\uc218\uc804\ub2ec Passing variables<\/strong>
– \uc544\ub798\uc758 videoID\ub294 index.html\ud30c\uc77c\uc5d0\uc11c \ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc744 \ub54c GET\ubc29\uc2dd\uc758 \ubcc0\uc218\ub85c YouTubePlayer.php\uc5d0 \uac12\uc744 \uc804\ub2ec\ud558\ub294 \ubcc0\uc218 \uc785\ub2c8\ub2e4.
– eventID\ub294 \uc720\ud22c\ube0c \uc601\uc0c1\uc758 \uc790\ub3d9 \uc7ac\uc0dd\uc744 \uc704\ud55c \ubcc0\uc218 \uc785\ub2c8\ub2e4. eventID = 1\uc774\uba74 \uc790\ub3d9\uc7ac\uc0dd, 0\uc774\uba74 \uc790\ub3d9\uc7ac\uc0dd\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
– 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.<\/p>\n\n\n\n

videoID=<Youtube Video ID><\/p>eventID = 0 or 1<\/cite><\/blockquote><\/figure>\n\n\n\n

<button type=\"button\"  onclick=\"changeIframeSource('.\/YouTubePlayer.php?videoID=13KaL-yfnjM&eventID=1<\/mark><\/strong>')\">\u25b6<\/button><\/pre>\n\n\n\n
3)iframe<\/strong>
– index.html\ud30c\uc77c\uc5d0 iframe\ub0b4\ubd80\uc5d0 YouTubePlayer.php\ud30c\uc77c\uc744 \ubd88\ub7ec \uc635\ub2c8\ub2e4. \uc544\ub798 \ucf54\ub4dc\ub294 \ub098\uc911\uc5d0 \uc218\uc815\ub420 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.
– Load the YouTubePlayer.php file inside the iframe in the index.html file. The code below may be modified later.<\/p>\n\n\n\n
<iframe id=\"yplayer\" type=\"text\/html\" width=\"640\" height=\"360\" src=\".\/YouTubePlayer.php\"\n frameborder=\"0\" scrolling=\"no\"><\/iframe><\/pre>\n\n\n\n
4)\uc8fc\uc694 \ucf54\ub4dc main code<\/strong><\/p>\n\n\n\n
<html>\n....\n<body>\n...\t\n<div class=\"item\"><a href=\"img\/gallery\/536\u00d7536thebeautyofbattle.png\" title=\"The beauty of battle\" data-lightbox-gallery=\"gallery1\">\n\t\t<img src=\"img\/gallery\/536\u00d7536thebeautyofbattle.png\" class=\"img-responsive \" alt=\"img\"><\/a>\n\t\t<button type=\"button\"  onclick=\"changeIframeSource('.\/YouTubePlayer.php?videoID=13KaL-yfnjM&eventID=1')\">\u25b6<\/button><\/strong>\n<\/div>\t\n...\n<section id=\"YouTubeplayer\" class=\"home-section text-center\"><\/strong>\n                <!-- youtube iframe player API: https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=ko#Getting_Started-->\n                <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->\n                <!--<div id=\"player\"><\/div> width=\"640\" height=\"360\"\/\/-->\n\n                <iframe id=\"yplayer\" type=\"text\/html\" width=\"640\" height=\"360\"\n                src=\".\/YouTubePlayer.php\"\n                frameborder=\"0\" scrolling=\"no\"><\/iframe>\n\t\n<\/sect<\/strong>ion>\n...\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc720\ud22c\ube0c \ud50c\ub808\uc774\uc5b4 Youtube Player(index.html) \uc81c\uac00 \uc18c\uac1c\ud574 \ub4dc\ub9ac\ub294 \uc774 \ub0b4\uc6a9\ub4e4\uc740 YouTube Player\ubd80\ubd84\uc785\ub2c8\ub2e4.These contents I am introducing are part of the YouTube Player. 1)\ud30c\uc77c \uc704\uce58 file location– index.html\uacfc YouTubePlayer.php\ud30c\uc77c\uc758 \uc704\uce58\ub294 \ub3d9\uc77c\ud55c \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc704\uce58 \ud569\ub2c8\ub2e4.– \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c index.html\ubd80\ubd84\uc744 \uc18c\uac1c\ud574\ub4dc\ub9ac\uace0 \ub2e4\uc74c \ud3ec\uc2a4\ud2b8\uc5d0\uc11c YouTubePlayer.php\ud30c\uc77c\uc5d0 \ub300\ud574\uc11c \uc18c\uac1c \ud574 \ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.– The index.html and YouTubePlayer.php files are located in the same directory.– I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":12,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/192\/revisions"}],"predecessor-version":[{"id":308,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/192\/revisions\/308"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}