All geek questions in one place

YouTube iframe API and WordPress

I try the following code on a WordPress page:

<div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } // 5. The API calls this function when the player state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function playVideo() { player.playVideo(); } function pauseVideo() { player.pauseVideo(); } function stopVideo() { player.stopVideo(); } function loadVideoById(val) { player.loadVideoById(val, 0, "large"); } </script>

However, nothing was displayed.

+5
source share
2 answers

This type of code injection is best done using Shortcode . Instead of document.createElement just use wp_enqueue_script to load the Iframe API, and the rest of the script is printed in short code. PHP heredoc makes it easy to create large custom HTML strings.

Using a short code inside a post / page will be: [ytplayer id="M7lc1UVf-VE"]

 add_shortcode( 'ytplayer', 'print_yt_player' ); function print_yt_player( $atts ) { wp_enqueue_script( 'yt-iframe', 'https://www.youtube.com/iframe_api' ); $yt_id = $atts['id']; $html = <<<HTML <div id="player"></div> <script> var player, done = false; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: '$yt_id', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { event.target.playVideo(); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function playVideo() { player.playVideo(); } function pauseVideo() { player.pauseVideo(); } function stopVideo() { player.stopVideo(); } function loadVideoById(val) { player.loadVideoById(val, 0, "large"); } </script> HTML; return $html; }
+1
source

Most likely, the <p> tags are inserted when the page / message is saved. Two options:

  • Disable wpautop

  • Include a compressed script (in one line), for example:

     <div id="player"></div> <script>var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var player;function onYouTubeIframeAPIReady(){player=new YT.Player("player",{height:"390",width:"640",videoId:"M7lc1UVf-VE",playerVars:{autoplay:1,controls:0},events:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}})}function onPlayerReady(a){a.target.playVideo()}var done=!1;function onPlayerStateChange(a){a.data!=YT.PlayerState.PLAYING||done||(setTimeout(stopVideo,6E3),done=!0)}function playVideo(){player.playVideo()}function pauseVideo(){player.pauseVideo()}function stopVideo(){player.stopVideo()}function loadVideoById(a){player.loadVideoById(a,0,"large")};</script>`
0
source

Source: https://habr.com/ru/post/1214225/

More articles:


All Articles