siva_selva

@celebritydance If Vimeo and YouTube videos aren’t playing on mobile devices, ensure they’re set to public and allow embedding. Use https links to avoid security blocks by mobile browsers. Make sure your video embeds are responsive by using WordPress’s native embed feature or custom CSS to adjust to mobile screen sizes. Update all plugins and themes to avoid compatibility issues and check for JavaScript errors using mobile browser developer tools.

Hi @pepe80,

The reason why http is set by default for subdomains in the wp_initialize_site() function is related to the logic within WordPress’s handling of multisite installations. Here’s the explanation:

Why http is Set for Subdomains:

1. Default Scheme Assumption:

• In WordPress, the default scheme (http or https) for a new site in a multisite network is initially set to http. This is a conservative default assumption, as not all servers or networks might have SSL (HTTPS) enabled by default, especially for subdomains.

2. Subdomain-Specific Logic:

• The relevant code in the wp_initialize_site() function starts with setting $home_scheme and $siteurl_scheme to http.
• The logic that follows checks if the multisite installation is a subdirectory install (e.g., example.com/site1). If it is, and the main site uses https, it changes the scheme to https for new sites as well.
• However, for subdomain installs (e.g., site1.example.com), this logic is bypassed, and the scheme remains http.

3. Rationale:

• The rationale behind this might be that subdomain installations can have more complex DNS and SSL configurations. WordPress doesn’t automatically assume that each subdomain will have https enabled, leaving it up to the site admin to configure SSL for each subdomain.

4. Custom SSL Requirements:

• Subdomains often require specific SSL certificates (like a wildcard SSL) to handle https properly. If WordPress were to default to https without verifying SSL setup, it could cause sites to break or produce security warnings.

In summary, http is set by default for subdomain installations because WordPress doesn’t automatically assume SSL is configured for each subdomain, avoiding potential issues with SSL setup. This default behavior can be overridden with custom code if your network is fully configured to use https.

Hi @anstia28 ,

Thank you for your feedback! I understand that you want the video to act as a decoration or complement to specific text, rather than as a background element. The code snippet you provided from the original website uses a more intricate setup involving custom HTML, CSS, and JavaScript to position the video alongside the text. Unfortunately, directly pasting this into Gutenberg won’t work due to WordPress’s limitations with custom code in certain blocks.

Alternative Solution:

1. Use a Custom HTML Block:

• You can try embedding the HTML directly using a Custom HTML block in the Gutenberg editor.
• Add a new block and select “Custom HTML”.
• Paste your code snippet:

<em class="Decoration_root__LtB_M Decoration_u__pmD4k" style="--width-el: 780.3125; --height-el: 155.8046875; --width-vid: 1140; --height-vid: 100;"> <span class="word" data-word="business.”" style="--word-index: 4; --line-index: 0;"> <span>business.”</span> </span> <video class="Decoration_video__Vm1dX" disableremoteplayback="" playsinline=""> <source src="path-to-your-video/underline.webm" type="video/webm"> <source src="path-to-your-video/underline.mov" type="video/quicktime"> </video> </em>

• Replace path-to-your-video/underline.webm and path-to-your-video/underline.mov with the actual URL paths to your uploaded video files in WordPress.

2. Add Custom CSS:

• To make this work seamlessly, you may need to add custom CSS.
• Go to Appearance > Customize > Additional CSS and add the CSS you found in the original site, adapting it to your needs.
• Example:

.Decoration_root__LtB_M { position: relative; display: inline-block; } .Decoration_video__Vm1dX { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

3. Use a Page Builder Plugin:

• If Gutenberg’s limitations are causing too many issues, consider using a more advanced page builder plugin like Elementor or WPBakery, which offer greater flexibility for embedding custom HTML, CSS, and JavaScript.
• These builders might allow you to recreate the effect with more control over positioning and behavior.

Additional Resources:

• If you’re looking for tutorials on how to integrate video effects into text elements or more complex animations in WordPress, you might find the following resources helpful:
• Elementor’s Guide to Adding Video Backgrounds
• Custom CSS and HTML in WordPress

I hope this helps! If you have any further questions or need additional clarification, feel free to ask. I’m here to help.

Hi @anstia28, If you want to create a similar green lines/circles animation effect as seen on the Leo Burnett website, you can achieve this by embedding the animation video into your WordPress site. Here’s a step-by-step guide:

1. Download the Video

• First, download the .webm video from Leo Burnett’s website or use your own animation video.

2. Upload the Video to WordPress

• Go to your WordPress dashboard.
• Navigate to Media > Add New and upload the video files.

3. Embed the Video in Gutenberg

• Create a New Page/Post: Start by creating a new page or post.
• Add a Cover Block: In the Gutenberg editor, add a “Cover” block (you can find it by clicking the “+” button and searching for “Cover”).
• Select the Video: In the Cover block settings, choose “Media Library” and select your uploaded video.
• Overlay Settings: You can adjust the overlay opacity or color if you want. Set the opacity to 0 if you prefer no overlay.

4. Optional: Customize with CSS

• If you need more control over the styling, you can add custom CSS:
  • Go to Appearance > Customize > Additional CSS and paste the following css:
    .wp-block-cover { height: 100vh; display: flex; justify-content: center; align-items: center; } .wp-block-cover video { object-fit: cover; width: 100%; height: 100%; }
• This CSS ensures the video covers the entire section and scales appropriately across different screen sizes.

5. Preview and Publish

• Use the preview feature to check how the animation looks.
• Once satisfied, publish your page or post.

Troubleshooting Tips:

• Ensure the video formats are supported by all major browsers (using .webm, .mp4, etc.).
• If the video doesn’t display correctly, check for plugin conflicts or browser compatibility issues.

This method should give you a similar effect to the green lines/circles animation seen on the Leo Burnett website. If you’re looking for more advanced options or custom animations, you might want to explore plugins or custom coding solutions.

• This reply was modified 3 months, 2 weeks ago by siva_selva.

Hi @celebritydance ,

I see you’re facing an issue with Vimeo videos showing up as black squares on mobile devices while they work fine on desktop. This can be frustrating, but I have a few suggestions that might help resolve the issue:

1. Check Vimeo Embed Settings:
   • Make sure that your Vimeo videos are set to public and that there are no restrictions that could prevent them from being viewed on mobile devices. Double-check the embed settings on Vimeo to ensure they’re optimized for mobile playback.
2. Use Responsive Embed Code:
   • Ensure that your Vimeo videos are embedded using a responsive method. If you’re using the WordPress block editor, try using the dedicated Vimeo block rather than pasting the embed code directly into an HTML block. This ensures that the video adapts properly to different screen sizes.
3. JavaScript Conflicts:
   • There might be JavaScript conflicts on your page causing the video to not load correctly on mobile. Use the browser’s developer tools to check for any console errors when accessing the page on mobile devices. If you’re using async or defer loading scripts, try disabling them temporarily.
4. Clear Cache and Minification:
   • If you’re using caching or minification plugins (like WP Super Cache or W3 Total Cache), try clearing the cache or temporarily disabling minification. Sometimes, these can interfere with how videos are loaded on different devices.
5. Cross-Device Testing:
   • Test the site on different mobile devices and networks (Wi-Fi and mobile data) to see if the issue persists across all platforms. This can help determine if the problem is device-specific.
6. Mobile Theme or Plugins:
   • If you’re using any mobile-specific themes or plugins, try disabling them to see if they’re causing the issue. Mobile plugins can sometimes interfere with how videos are rendered.
7. SSL and Mixed Content:
   • Ensure that your site is fully SSL-secured (HTTPS) and there are no mixed content issues, as these can sometimes prevent videos from loading properly on mobile devices.

If these steps don’t resolve the issue, it might be helpful to share more details about how the videos are embedded or if you’re using any specific plugins that could be affecting video playback. Good luck, and I hope this helps!

Hi @chipeater, you can achieve this by setting up a 301 redirect in WordPress. This will allow the old URL (potteries-oatcakes) to redirect to the new one (staffordshire-oatcakes) without breaking the link for anyone who has the original URL.

Here’s how you can set it up:

1. Using a Plugin:

• Install a plugin like Redirection or Simple 301 Redirects.
• Once installed and activated, go to the plugin’s settings.
• Add a new redirect: Set the “Source URL” to /potteries-oatcakes and the “Target URL” to /staffordshire-oatcakes.
• Save the changes.

1. Manually Editing .htaccess:

• If you’re comfortable editing your .htaccess file, you can add the following line:
  Redirect 301 /potteries-oatcakes /staffordshire-oatcakes
• This will achieve the same effect, ensuring that anyone who visits the old URL is automatically redirected to the new one.

Using a redirect ensures that anyone using the old URL will seamlessly be taken to the new page without any issues, and you won’t need to send out a new link.

Hi,

I need to redirect url after logged in.

Please help us to do this.

Thanks.

I have also Same Problem “Empty Articles: You have one or more articles without any content.”.Please tell how to fix it.