WordPress YouTube native responsive

The native YouTube url when you embed into wordpress content is not responsive so we need to add a code to this iframe or embed

so we need to add to functions.php this code

what this code do is to search for the embed code of youtube and add to it

in order to change it with css


add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

function wrap_embed_with_div($html, $url, $attr) {
        return "<div class=\"responsive-container\">".$html."</div>";
}

and this css code to your css file or theme settings css


.responsive-container {
        position: relative;
        padding-bottom: 50.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-bottom: 1em;
}
.responsive-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}


hope i helped someone in this world 🙂

Advertisements

add new tab to my account in woocommerce

i wanted to add wishlist tab to the account page in woocommerce in the the theme enfold  i was using the yith plugin yith-woocommerce-wishlist  so i need to show the title with link to the content that will show the shortcode here what i did

first add to function.php in the child theme this code


/*
* add option to edit elements via css class
*/
// add_theme_support('avia_template_builder_custom_css');

/**
* Insert the new endpoint into the My Account menu.
*
* @param array $items
* @return array
*/
function my_custom_my_account_menu_items( $items ) {
// Remove the logout menu item.
$logout = $items['customer-logout'];
unset( $items['customer-logout'] );

// Insert your custom endpoint.
$items['my-custom-endpoint'] = __( 'המעודפים שלי', 'woocommerce' );

// Insert back the logout item.
$items['customer-logout'] = $logout;

return $items;
}

add_filter( 'woocommerce_account_menu_items', 'my_custom_my_account_menu_items' );

/**
* Register new endpoint to use inside My Account page.
*
* @see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
*/
function my_custom_endpoints() {
add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
}

add_action( 'init', 'my_custom_endpoints' );

/**
* Add new query var.
*
* @param array $vars
* @return array
*/
function my_custom_query_vars( $vars ) {
$vars[] = 'my-custom-endpoint';

return $vars;
}

add_filter( 'query_vars', 'my_custom_query_vars', 0 );

/**
* Endpoint HTML content.
*/
function my_custom_endpoint_content() {
echo do_shortcode('[yith_wcwl_wishlist]');
}

add_action( 'woocommerce_account_my-custom-endpoint_endpoint', 'my_custom_endpoint_content' );

 

so with the function my_custom_endpoint_content i can display what i want in the my account tab content and i did used the shortcode that comes with the plugin