Tell me how to add a wrapper tag iframe, I want to make a responsive wrapper for the tag, if I throw an iframe with youtube into the body of the post the output iframe is wrapped with the p tag, can it be wrapped like div.responsive-wrapper?

  • In fact, the VP itself understands links from YouTube. No need to insert any iframes unnecessarily. see codex.wordpress.org/… - SeVlad

1 answer 1

This is how adaptive layout for youtube is done. padding-bottom: 56.25% calculated based on the aspect ratio of the video. In this case, 16x9. The calculation is as follows:

 9/16*100% = 56.25% 

 #video { width: 70%; margin: auto; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
 <div id="video"> <div class="video-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/WlnexV2eAvI" frameborder="0" allowfullscreen> </iframe> </div> </div>

UPDATE:

You can display the adaptive iframe in the post text via your shortcode. The following code should be added to functions.php :

 function youtube_shortcode($atts) { ob_start(); ?> <div id="video"> <div class="video-container"> <iframe src="https://www.youtube.com/embed/<?php echo $atts['src']; ?>" frameborder="0" allowfullscreen> </iframe> </div> </div> <?php return ob_get_clean(); } add_shortcode('youtube', 'youtube_shortcode');

The text of the post should be inserted: [youtube src="WlnexV2eAvI"]

A working example is here .

  • This is understandable, but how can I output .video-container - Anton Essential
  • Automatically in the body of the article the iframe tag wraps with the p tag, but I will not add tags to the post, this is somehow not cool. I want to just throw the iframe into the body of the article but at the output get it wrapped in .video-container - Anton Essential
  • Well, you want WordPress to do everything in a miraculous way. It does not happen. Do not want to insert tags with your hands - write your shortcode and insert the youtube video into the post body like this: [youtube src = "WlnexV2eAvI"] - KAGG Design
  • Well, what I myself)) I thought through functions somehow you can, let's say you can cut the p tag so that the iframe was in itself means you can somehow add it. - Anton Essential
  • You can cut it like this: function strip_ptags_on_iframe ($ content) {return preg_replace ('/ <p> \ s * (<iframe. *> *. <\ / iframe>) \ s * <\ / p> / iU', '\ 1 ', $ content); } add_filter ('the_content', 'strip_ptags_on_iframe'); How to add I do not know. Well, yes, you can through the shortcode. - Anton Essential