Embed Vimeo Video in Homepage

[stevehb]

Hi

Site address is https://perceptionprofiling.com/

I’d like to embed an explainer video BELOW the slider on the homepage, so I have put the following code in the Home Welcome Content section…

<iframe src=”https://player.vimeo.com/video/321200109″ width=”640″ height=”360″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

When I look at this in the visual editor it shows the embedded video, so I hit the save button and then publish.

BUT… the video doesn’t show on the homepage after it’s published. How do I fix this please?

Thanks
Steve

[Sonl Sinha]

Hi,

Kindly send us your URL of the site and WordPress admin details (Username & Password) via email: [email protected] Please mention this forum URL while replying so that we understand what needs to be done.

Regards,
Brad

[stevehb]

Hi Brad

We’ve been through this before… My client won’t allow me to share admin credentials with Third Party Developers.

Please respond via the forum with any code and where it needs to go or any other fixes.

Thank You
Steve

[Sonl Sinha]

Hi,

We do not know what code you have used.

So Can you send us the backend screenshot?

Regards,
Brad

[stevehb]

Hi Brad

Thanks for helping me…

The code I used is in the first post of this thread… Here it is again in case you missed it…

Site address is https://perceptionprofiling.com/

I have put the following code in the HOME WELCOME CONTENT SECTION in WordPress. I did this in TEXT VIEW.

<iframe src=”https://player.vimeo.com/video/321200109″ width=”640″ height=”360″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

When I look at this in the visual editor it shows the embedded video, so I hit the save button and then publish.

BUT… the video doesn’t show on the homepage after it’s published. How do I fix this please?

Thanks
Steve

[stevehb]

Here are the images you requested…

https://imgur.com/a/q3SuAIP

Thanks
Steve

[Sonl Sinha]

Hi,

Are you using cache plugin?

Regards,
Brad

[stevehb]

Hi Brad

Nope, no cache or accelerator plugins at all.

Plugins are up to date and are:

THESE ARE ACTIVE PLUGINS

Accessibility by UserWay
Deactivate
The UserWay Accessibility Widget is a WordPress plugin that helps make your WordPress
Version 1.2 | By UserWay.org | View details

Black Studio TinyMCE Widget
Deactivate
Adds a new “Visual Editor” widget type based on the native WordPress TinyMCE editor.
Version 2.6.7 | By Black Studio | View details | Home | FAQ | Support | Rate | Follow | Donate

Contact Form 7
Settings | Deactivate
Just another contact form plugin. Simple but flexible.
Version 5.1.1 | By Takayuki Miyoshi | View details

Contact Form DB
Deactivate
Save form submissions to the database from Contact Form 7, Fast Secure Contact Form, JetPack Contact Form and Gravity Forms. Includes exports and short codes. | Data | Short Codes | Settings | Reference
Version 2.10.0 | By Michael Simpson | Visit plugin site

Cookie Notice
Settings | Deactivate
Cookie Notice allows you to elegantly inform users that your site uses cookies and to comply with the EU cookie law GDPR regulations.
Version 1.2.46 | By dFactory | View details | Support

Easy Twitter Feed Widget
Deactivate
Add twitter feeds on your WordPress site by using the Easy Twitter Feed Widget plugin.
Version 0.9 | By DesignOrbital.com | View details

Media Library Categories
Categories | Try Premium Version | Deactivate
Adds the ability to use categories in the media library.
Version 1.7 | By Jeffrey-WP | View details

Media Library Folders for WordPress
Deactivate
Gives you the ability to adds folders and move files in the WordPress Media Library.
Version 4.3.7 | By Max Foundry | View details

Ninja Popups
Deactivate
Awesome Popups for Your WordPress!
Version 4.6.1 | By ArsCode | Visit plugin site

Permalink Manager Lite
Deactivate
Advanced plugin that allows to set-up custom permalinks (bulk editors included), slugs and permastructures (WooCommerce compatible).
Version 2.2.0 | By Maciej Bis | View details

Quick Featured Images
Deactivate | Settings
Your time-saving Swiss Army Knife for featured images: Set, replace and delete them in bulk, in posts lists and set default images for future posts.
Version 13.3.2 | By Martin Stehle | View details

Re-add text underline and justify
Deactivate
This tiny plugin re-adds the Editor text underline & justify buttons in the WYSIWYG removed in WordPress 4.7. Works with Gutenberg.
Version 0.2 | By Brice Capobianco | View details | More b*web Plugins | Donate to this plugin »

Really Simple SSL
Premium Support | Docs | Settings | Deactivate (revert to http)
Lightweight plugin without any setup to make your site SSL proof
Version 3.1.4 | By Rogier Lankhorst, Mark Wolters | View details

Redirection
Settings | Deactivate
Manage all your 301 redirects and monitor 404 errors
Version 4.0.1 | By John Godley | View details

ShareThis
Deactivate
Let your visitors share a post/page with others. Supports e-mail and posting to social bookmarking sites. Configuration options are here. Questions on configuration, etc.? Make sure to read the README.
Version 7.4 | By The ShareThis Team | Visit plugin site

UpdraftPlus – Backup/Restore
Manage Addons | Add-Ons / Pro Support | Settings | Deactivate | Take Tour
Backup and restore: take backups locally, or backup to Amazon S3, Dropbox, Google Drive, Rackspace, (S)FTP, WebDAV & email, on automatic schedules.
Version 2.16.6.24 | By UpdraftPlus.Com, DavidAnderson | View details | Check for updates

WooCommerce
Settings | Deactivate
An eCommerce toolkit that helps you sell anything. Beautifully.
Version 3.5.5 | By Automattic | View details | Docs | API docs | Premium support

WooCommerce Blocks
Deactivate
WooCommerce blocks for the Gutenberg editor.
Version 1.4.0 | By Automattic | View details

Wordfence Security
Upgrade To Premium | Deactivate
Wordfence Security – Anti-virus, Firewall and Malware Scan
Version 7.2.3 | By Wordfence | View details

WordPress Importer
Deactivate
Import posts, pages, comments, custom fields, categories, tags and more from a WordPress export file.
Version 0.6.4 | By wordpressdotorg | View details

WP All Export
Deactivate
Export any post type to a CSV or XML file. Edit the exported data, and then re-import it later using WP All Import.
Version 1.2.3 | By Soflyy | View details

WP All Import
Deactivate
The most powerful solution for importing XML and CSV files to WordPress. Create Posts and Pages with content from any XML or CSV file. A paid upgrade to WP All Import Pro is available for support and additional features.
Version 3.4.9 | By Soflyy | View details

WP Post Page Clone
Deactivate
A plugin to generate duplicate post or page with contents and it’s settings.
Version 1.0 | By Gaurang Sondagar | View details

WP-Print
Deactivate
Displays a printable version of your WordPress blog’s post/page.
Version 2.58 | By Lester ‘GaMerZ’ Chan | View details

THESE ARE INACTIVE PLUGINS

Another Events Calendar
Activate | Delete
Another Events Calendar is a top-of-the-line event management plugin helps you organize and manage any type of events such as Conferences, Seminars, Meetings, Team Building Events, Trade Shows, Business Dinners, etc… in a very simple way.
Version 1.7.0 | By Yendif Technologies Pvt Ltd. | View details

Google Captcha (reCAPTCHA) by BestWebSoft
Activate | Delete
Protect WordPress website forms from spam entries with Google Captcha (reCaptcha).
Version 1.42 | By BestWebSoft | View details

Media Library Folders for WordPress Reset
Activate | Delete
Plugin for reseting WordPress Media Library Folders
Version 4.3.7 | By Max Foundry | View details

WooCommerce Print Invoice & Delivery Note
Activate | Delete
Print Invoices & Delivery Notes for WooCommerce Orders.
Version 4.4.7 | By Tyche Softwares | View details

WP Ultimate CSV Importer
Activate | Delete
Seamlessly create posts, custom posts, pages, media, SEO and more from your CSV data with ease.
Version 5.6.1 | By smackcoders | View details

Thanks
Steve

[stevehb]

Hello

Any update on this please?

Thanks
Steve

[Sonl Sinha]

Hi,

Add this shortcode at the last on core-functoin.php

// Shortcode iframe
/* [iframebox4]Description[/iframebox4] */

function iframe4($atts, $content = null){
    extract( shortcode_atts(array(
      'bgcolor'  => 'bgcolor',
      'bordercolor'  => 'bordercolor',
    ), $atts));
    
    return '
      <div class="iframe4">
              <iframe src="'.$content.'"></iframe>
             </div>  
    ';
}
add_shortcode('iframebox4','iframe4');

Add CSS in custome style

.iframe4 iframe {width:100%; min-height: 350px;border:none;}
.iframe4 {width:100%; min-height:350px;}

And use this shortcode to display video
[iframebox4]https://player.vimeo.com/video/321200109[/iframebox4]

Regards,
Brad

[stevehb]

Hi

Thank you for this… It nearly works but isn’t quite right.

The solution you have provided stops the user from selecting the option to make the video full screen which is a basic option that is required.

The Embed Code generated by Vimeo allows this. Here is the Embed code…

<iframe src="https://player.vimeo.com/video/321200109" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen</iframe>

I need to be able to have the function to let users make the video full screen.

Also how can I make he video about 50% bigger on the homepage? It is a little lost at the current size.

Thank You.
Steve

[Sonl Sinha]

Hi,

Kindly use this one

#player {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

Regards,
Brad

[stevehb]

Hi Brad

I’ve been reading around and I’ve found this…

I found it here… https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters

Applying embed parameters to Vimeo.com URL

If you are using an application that requires you to insert a Vimeo.com URL (e.g https://vimeo.com/76979871) instead of our embed code, you will be unable to use player parameters to customize the embedded player.

For example, this method is not supported:

https://vimeo.com/76979871?quality=720p

This is supported:

<iframe src="https://player.vimeo.com/video/76979871?quality=720p" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Some examples of applications that only support Vimeo URLs are social media posts, WordPress themes and plugins, Wix plugins, Squarespace plugins, and other miscellaneous video embed tools within webpage builders. The good news is, some tools may allow you to adjust player preferences (like autoplay, for instance) directly in their own UI.

Do you support any WordPress based Video players that work alongside your theme… Like Easy Video Player or Advanced Responsive Video Embedder?

Thanks
Steve

[stevehb]

Hi Brad

I added

#player {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
}

To the CSS but it hasn’t made any difference I’m afraid.

Thanks
Steve

[stevehb]

Morning

Any other thoughts or ideas on this?

At the moment I have put a workaround in place using a pop-up but it isn’t what the client wants.

Thanks
Steve

[Author]

Posts