How to overwrite youtube embed?

Taking a closer look at the code provided on that site, it appears that the main differences with what it output by default by WordPress is the following:

  • the iframe is wrapped with a div that has a class of embed-container
  • there are CSS styles that are used by that class

In WordPress, to wrap the embed iframe, add the following to your theme’s functions.php or to a functionality plugin:

add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
return '<div class="embed-container">' . $html . '</div>';
}

and add the CSS generated by http://embedresponsively.com/ to your theme:

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto;
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}

I tested the filter and it worked just fine. I did not test the CSS though, that will be up to you to play with.

Source for the filter: http://wordpress.org/support/topic/adding-a-wrapping-div-to-video-embeds?replies=2

Related Posts:

  1. Embed video from streamtape using direct link
  2. How to make a image-size selected by default in Media upload – WP v3.5
  3. Apply class to every paragraph that holds image?
  4. Remove “Insert from URL” link in Media upload – WP 3.5
  5. static variable loop not working in WordPress
  6. adding a filter to a shortcode?
  7. Set media upload attachment link to none and hide it in WP v3.5
  8. Change the footer text on the login page
  9. add_filter to post-gallery and remove all ‘s?
  10. Rewriting search and pagination base
  11. Check if page parent has certain template
  12. Change comments form title on a page by page basis
  13. Remove class that has been added by parent theme
  14. How do I know what variables are passed in a filter/action and what their meaning is?
  15. Why do filters/actions require an argument count?
  16. How to check If Oembed is empty or not
  17. How to use return in my custom function instead of echo
  18. Run a filter when a walker runs
  19. Handling Body class based on Template
  20. Get_avatar filter?
  21. Add a class to the anchor tag on HTML5 gallery
  22. add_action shortcut?
  23. How can I remove a function that has been added to wordpress with add_filter?
  24. How to control WordPress image metadata (using Imagick)?
  25. How do I add custom bulk actions to multiple custom post types?
  26. Add data attribute to each li in menu
  27. Removing “wpautop” (auto tags) only on certain pages?
  28. Print last modified date only on posts
  29. WordPress Gravatar filter is removing my custom attributes
  30. Generating an nonce for Content Security Policy and all scripts – How to make it match/persist for each page load?
  31. Unique icons next to each WordPress menu item
  32. Alter required message using comment form api
  33. Add item to top of menu using a filter in functions.php
  34. How to make modifications only to certain elements of an HTML string on the server-side?
  35. Override a function defined in wp-includes/comment-template.php
  36. Remove Custom Divs from AMP pages
  37. Filtering a function’ output for a new continued function
  38. Deleting Certain terms from appearing on the front end as links
  39. Content filter won’t work
  40. Warning: in_array() null given in PHP function
  41. Upload multiple files in randomly generated folder using wp_upload_bits
  42. Create page template via functions.php?
  43. Add meta tags to a custom header
  44. How to have different site identity logos on each page on Astra Theme [closed]
  45. Custom query vars filters problem with pagination
  46. Get the name of menu item with wp_nav_menu
  47. How to add aria role and schema markup to custom walker container
  48. Must filter functions receive all arguments passed to them?
  49. User filter posts by year
  50. How to remove get_header From all single pages in wordpress with functions.php without plugin?
  51. Include User ID in iFrame URL
  52. Apply function.php filter only if url not has /amp/
  53. Change lost password url to a mailto URL in WordPress
  54. Remove span tags from WooCommerce Downloads page
  55. How to bind each “the_content” elements to a custom variables
  56. Reload page with a different shortcode when a user selects from a dropdown
  57. WordPress Ajax filter: Create two loops for different output styles?
  58. Custom Bulk Actions handler not firing
  59. How to generate customized filtered output for the gallery
  60. oembed facebook link?
  61. How to add a custom class for iframe by embed_oembed_html
  62. How to remove title tag with this filter
  63. str_replace not preserving whitespace
  64. Woocommerce Price Text
  65. Limit Taxonomy Parents
  66. Display a post based on its metabox selection
  67. Search box background on a different page template
  68. Display a list of users with avatar filterable with alphabets
  69. AJAX: WordPress filters inside $html do not work as intended
  70. Assign new post author IF another user in custom field on post transition
  71. Add attribute to featured image with filter (wp_get_attachment_image_attributes)
  72. How to add different menu items on different menus?
  73. How to pass value to add_filter wpcf7_form_tag from another function?
  74. Add text below WooCommerce short description if metabox value is true
  75. Is there a hook that I can use when a fatal error occurs?
  76. How can I modify the permalink via a filter?
  77. wp_set_object_terms and arrays
  78. Show only IF not Google bot [closed]
  79. How the functions in WP are called in tags
  80. Woocommerce – remove product from category
  81. Differences when using the the_time and the_date functions
  82. WooCommerce: How can I get orders with a custom ID in order meta data object?
  83. Modify function to print tags/categories/exclude tags/categories/ number of posts
  84. WordPress get_media_embedded
  85. How can I hook into the wp_mail function used by BackWPup?
  86. how to enqueque code in a php file from functions.php
  87. Convert all uploaded PNG files to PNG-8 format
  88. Uses for function: wp_update_user
  89. Exclude category from function – PHP
  90. How to change href of a Widget menu item link?
  91. Populate Posts based on category selected using AJAX that means without page refresh
  92. Why transition_post_type hook is called twice for the same post?
  93. Can’t get_users info by using json_encode
  94. Page returning ID from array, how to return the correct values for post in acf wordpress
  95. Permission error on plugin save
  96. Removing all my hardcoded URLs with get_site_url()
  97. Highlight main menu when on specific posts or pages
  98. Adding Gravity Form With if(is_page) Is Not Working
  99. Woocommerce – Shipping tax class based on cart items not using the highest tax available
  100. Generate and upload screenshot as featured image for user-submitted post

Leave a Comment