Youtubeのiframeを印刷時に表示する方法

Youtubeの動画埋め込みを印刷 HTMLとCSS

Youtubeのiframeは印刷できるのか？

Youtubeはiframeで読込されていますが、印刷時にはブラウザによって異なります。ChromeやFirefoxでの印刷では、youtube部分が、真っ白やグレー、真っ黒の状態になります。EdgeではYoutube部分のサムネイル画像が印刷されます。

プリント時にjsでYoutubeのiframeをCanvasに描写する方法

ChromeやFireFoxでも印刷時にYoutube部分を表示する方法はいくつかあります。Videoは印刷できないので、印刷できるCanvasにYoutube動画をみためそのままで、画像にしてしまう方法がります。

Jsで Iframe を取得して、Canvasに表示して、CSSでIframe を非表示にすると実現します。Canvasだと、プリント時にyoutubeを再生していたら、その途中でも画像にして表示することができます。

Youtubeのサムネ画像を印刷する方法

印刷時にYoutubeのサムネイルを表示させる。

YoutubeのIframe では動画を読み込むまでの待機状態はサムネイル画像が表示されています。サムネイル画像はbackgroundで読み込まれていて、再生前の段階はこの画像が表示されている状態になります。YoutubeのIframeで読み込まれている、Videoのリンクが実際の動画です。このVideoのスペースが前面に表示されているとサムネイル画像は表示されません。

印刷時にはVideo（Ifmame）をCSSで隠して、Youtubeのサムネイル画像を表示すると簡単です。

Youtubeの埋め込み動画部分は、印刷で表示した状態は以下のようになります。

埋め込みYoutube印刷を表示したい

YoutubeのIDからサムネイル画像を表示する方法

Youtube

上記の動画で例にします。YoutubeサイトからIframeをコピーしてきます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/VdpXeywyT5U" 
　title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
　gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Iframe のsrc部分にYoutube動画IDがあります。
src=”https://www.youtube.com/embed/【Youtube動画ID】“

Youtue動画IDをサムネ画像専用のURLに当てはめます。　
https://i.ytimg.com/vi/【Youtube動画ID】/maxresdefault.jpg

<img src="https://i.ytimg.com/vi/VdpXeywyT5U/maxresdefault.jpg" alt="" >

画像の比率は16：9です。これをHTMLで追加すれば、Yutubeサムネイル画像が表示されます。この画像にCSSを適用して枠線をつければ印刷用youyubeサムネイル画像が完成です。

PHPでyoutubeのIframeからサムネイル画像を追加するプログラム

Youtubeのサムネイル画像を追加するPHPプログラム

HTMLコンテンツを書き換えます。Iframeからyoubeu動画IDを取得して＜img＞と＜p＞youtube＜/ｐ＞を追加します。

function YOutube_Thumb_Input( $content ){   

      //------------------
      //youtubeサムネ画像追加
      //------------------
      //$content ;//【整形前テキスト】”;

        if ( strpos(  $content , ' src="https://www.youtube.com/embed/') !== false ) {
          $new_content = "";//整形後のHTML

          $sercHTML = '<iframe '; //分割対象HTML
          if ( strpos(  $content ,   $sercHTML ) === false ) {
            //一致なし
              $new_content =  $content ;//分割出来ないので返す

          }else{
                //'<iframe '一致あり
                $arr =  explode($sercHTML,  $content);
                $sw = 0;
                if(is_countable($arr )){
                  $sw = count($arr );
                }//

                //------------
                for ($i=0; $i < $sw  ; $i++) { 

                  if($i == 0){
                       //先頭のHTML
                       $new_content .= $arr[$i];
                  }else{
                        //----------
                        //youtubeかどうか
                        //---------
                        if ( strpos(  $content , ' src="https://www.youtube.com/embed/') !== false ) {
                          //YoutubeだったのでIDを取り出す

                          if ( strpos( $arr[$i], ' src="' ) === false ) {
                          //一致なし(最後のHTML)
                          $new_content .= $arr[$i];
                          }else{
                          //一致あり
                            $ID = "";
                            list($botu, $src1)  = explode(' src="',$arr[$i], 2); 
                            list($src2, $botu)   = explode('"' ,$src1 , 2); 
                            list( $botu ,$src3)   = explode('https://www.youtube.com/embed/', $src2 , 2);  
                            list($ID, $botu3)   = explode('?' ,$src3 , 2); 
                            
                            $input = "\n\n".'<img src="https://i.ytimg.com/vi/'. $ID .'/maxresdefault.jpg" alt="" class="youtube_thumb" width="400" height="226">
                                    <p class="youtube_mes">Youtube</p>'."\n";
                            $new_content .=  $input ."\n" .$sercHTML .$arr[$i];
                          }
                        }else{
                            //Youtubeじゃないので戻す
                            $new_content .=  $sercHTML .$arr[$i];
                        }//end_if
                        //----------
                  }//end_if
                }//end_for
                //----------
          }//end_if  
          $content =  $new_content ;
        }//end_if
      //----------------------

      return $content ;//整形後のHTMLを返す
}//end_function

CSSで、印刷時にIframeを非表示にして、サムネイル画像にボーダー赤線をつけてわかりやすくします。

/*--youtubeのサムネイル画像-----*/
.youtube_thumb{
  display:block;
  width:80%;
  max-width:400px;
  height:auto;
  border:solid 2px #ff0000;
  margin:0 auto ;
  clear:both;
}
.youtube_mes {
  display:block;
  width:80%;
  height:auto;
  max-width:400px;
  color:#ff0000;
  font-size:80%;
  text-align:center;
  margin:0 auto 10px;
  line-height:110%;
  padding:0;
}
@media print{
  iframe {display:none;}
  .video-container, .video {height:initial;height:auto;}
  .youtube_thumb,
  .youtube_mes {
    display:block;
  }
}

WordPressでyoutubeのサムネイル画像を追加する方法

WordPressではページの本文内容を表示する前に、一時的に本文データを保留して、HTMLを書き換えて返しています。

function.phpに以下プログラムを追加します。

//============================================================
//youtube動画IDから画像を追加する
//------------------------------
if(is_admin() === false){ //管理画面じゃない時
  
  // HTMLを出力せずにためておく(テーマが読み込まれた直後に起動)
  add_action('after_setup_theme', function(){

    //ob_start($callback) → 出力のバッファをONにする。(HTMLが即座に出力されずにプールされている状態になる)
    //                       callbackはバッファが最後に出力されるときに呼び出され、このバッファに対して処理をする
    ob_start(function ($buffer_html) {

      //****************************
　　　//ここに処理プログラムを記載する

　　　　//$buffer_html;//本文内容
    
        $content = YOutube_Thumb_Input( $buffer_html );//サムネいる画像をを追加する整形用functionに送る

      　$buffer_html =   $content ;
　　　//*******************************

  		 return $buffer_html;//整形後の本文をWordPressに返す

			});
		}, 10000);  //第2引数は優先順位(デフォルト10, 大きいほど後にまわされる)

		//----------------------------------------------------
		//ためていたHTMLを出力する(WordPressが処理を終了する直前に起動)
		//----------------------------------------------------
		add_action('shutdown', function(){
			if(ob_get_length() > 0){
				ob_end_flush();
			}
		}, 10000);  //第2引数は優先順位(デフォルト10, 大きいほど後にまわされる)
		
	}
//===================================

WordPress側でもCSSを適用させれば、印刷時にYoutubeサムネイル画像が表示されます。

タイトルとURLをコピーしました