お世話になります。
Wordpressのある固定ページで、youtubeのiframeを取得するコードをjavascriptで記述しています。
動画の取得はうまくいったのですが、get_header()とget_footer()が読み込まれないのか他の要素が取得できません。
コードは以下になります。
<?php /** * Template Name: page youtube */ get_header(); ?> <script> //step1:uploadsのplaylistIdの取得を試みる $.ajax( { "timeout": 5000, "url": "https://www.googleapis.com/youtube/v3/channels", "type": "GET", "dataType": "jsonp", "data": { "part": "contentDetails", "key": "APIキー", // "forUsername": ユーザーID, // または "id": "チャンネルID", }, "success": function(res) { if(!res || !res.items || !res.items[0] || !res.items[0].contentDetails || !res.items[0].contentDetails.relatedPlaylists || !res.items[0].contentDetails.relatedPlaylists.uploads) { //error処理 alert("error!"); return ""; } var playlistId = res.items[0].contentDetails.relatedPlaylists.uploads; //step2:uploadsのplaylistIdが動画リストを取得する $.ajax( { "timeout": 5000, "url": "https://www.googleapis.com/youtube/v3/playlistItems", "type": "GET", "dataType": "jsonp", "data": { "part": "snippet", "key": "AIzaSyA1Qx_pqeQSM69J1hKSwzAYkLz6RiOHudE", "playlistId": playlistId, "maxResults": 5 }, "success": function(res) { if(!res || !res.items || !res.items[0] || !res.items[0].snippet || !res.items[0].snippet.resourceId || !res.items[0].snippet.resourceId.videoId) { //error処理 alert("error!"); return ""; } var videoIds = []; for(var i = 0; i < res.items.length; i++) { var id = res.items[i].snippet.resourceId.videoId; if($.inArray(id, videoIds) != -1) { continue; } videoIds.push(id); document.write('<iframe src="http://www.youtube.com/embed/' + id + '"></iframe>'); } }, "error": function(res, status) { //error処理 alert("error!"); return ""; } } ); }, "error": function(res, status) { //error処理 alert("error!"); return ""; } } ); </script> <?php get_footer(); ?>
[原因と思われる部分]
以下の部分は、元はalert()でコーディングされて、その際は正常にヘッダーやフッターが表示されていました。
document.write('<iframe src="http://www.youtube.com/embed/' + id + '"></iframe>');
document.writeに書き換えたところ、おかしくなります。
documentとajaxが関係しているのでしょうか。
出力先のコードは以下になります。
>出力先ページ
解決策ありましたらご教授いただけませんでしょうか。
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。