YouTube iFrame 404 Error

EDIT: If I deactivate the placeholder from WPBakery Page Builder, everything runs ok. But I don’t want to do without the thumbnails. If I don’t accept cookies, it also works…

Apparently there are problems with this when the PageBuilder outputs the autostart for the YouTube video through the Start button.

• This reply was modified 1 year, 3 months ago by wiwaltill.

Hi @wiwaltill,

The behavior seems to occur due to both Complianz and WPBakery being configured to add the thumbnail to this element. The 404 specifically occurs when you click the additional WPBakery Play button (and only after already having provided consent).

Expectedly, when clicking the play button after consent; this changes the URL again (after Complianz performed similar actions), which then results in the undefined/404 error.

As Complianz adds the placeholder/thumbnail to the blocked YouTube content, this should suffice to both add a thumbnail prior to consent; as well as that it allows the video to play as expected.

Kind regards, Jarno

• This reply was modified 1 year, 3 months ago by jarnovos.

Thank you for the quick feedback.

But unfortunately it doesn’t work. If I switch off the WPBakery thumbnail, I can start the video normally, but the proportions of the player are then completely lost. Is it possible to deactivate the placeholder of Complianz if I have accepted the cookies?

Alternatively, an option that hides any placeholders would be good. And then if someone does not accept cookies, no video is shown at all. Maybe as a black screen for example.

Hi @wiwaltill,

You could indeed try disabling the Complianz placeholders for YouTube specifically; to ensure that placeholders from other services remain unaffected by this change.

You can do this under Complianz -> Integrations -> Services -> YouTube, by disabling the checkbox next to “Placeholder”.

Leave the other slider enabled so that the YouTube content is still blocked; but just stops the placeholder from being inserted.

Kind regards, Jarno

Unfortunately, there is no difference whether with or without the placeholder checkbox.

Hi @wiwaltill,

Is this a default video block from WP Bakery Builder? Where can I add the placeholder from WP Bakery Builder? I’m trying to reproduce the issue at my end,

regards Aert

Hi @aahulsebos

I don’t think so. I found this template in my theme files:

vc_video.php

<?php
$output = $title = $link = $size = $el_class = '';
extract( shortcode_atts( array(
	'title' => '',
	'link' => 'https://vimeo.com/92033601',
	'image' => '',
	'el_class' => '',
	'css' => ''

), $atts ) );
if ( $link == '' ) {
	return null;
}
$el_class = $this->getExtraClass( $el_class );

// Video Preview
if(!empty($image)) {
	$preview = wp_get_attachment_image_src($image, 'full');
	if(!empty($preview[0])) {
		$preview = $preview[0];
	}
	$preview_hidden = '';
} else {
	$preview_hidden = 'preview_hidden';
}

global $wp_embed;
$embed = '<iframe width="950" height="534" data-src="'.$link.'?feature=oembed" allow="autoplay" frameborder="0" allowfullscreen=""></iframe>';


$css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, 'wpb_video_widget wpb_content_element' . $el_class . $el_class . vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts );

if(!empty($preview)) {
    $output .= "\n\t" . '<div class="stm_video_wrapper">';
    $output .= "\n\t" . '<div class="' . $css_class . '">';
    $output .= "\n\t\t" . '<div class="wpb_wrapper">';
    if (!empty($title)):
        $output .= "\n\t" . '<div class="stm_video_wrapper_title">';
        $output .= wpb_widget_title(array('title' => $title, 'extraclass' => 'wpb_video_heading'));
        $output .= "\n\t" . '</div> ' . $this->endBlockComment('.stm_video_wrapper_title');
    endif;
    $output .= '<div class="stm_theme_wpb_video_wrapper">';
    if (!empty($preview)):
        $output .= '<div class="stm_video_preview" style="background-image:url(' . $preview . ')"></div>';
    endif;
    $output .= '<div class="wpb_video_wrapper ' . $preview_hidden . '">' . $embed . '</div></div>';
    $output .= "\n\t\t" . '</div> ' . $this->endBlockComment('.wpb_wrapper');
    $output .= "\n\t" . '</div> ' . $this->endBlockComment('.wpb_video_widget');
    $output .= "\n\t" . '</div> ' . $this->endBlockComment('.stm_video_wrapper');
    echo masterstudy_filtered_output($output);
} else { ?>
    <iframe width="100%" height="400" src="<?php echo esc_url($link); ?>?feature=oembed" allow="autoplay" frameborder="0" allowfullscreen=""></iframe>
<?php }
?>

<?php if(!empty($link)): ?>
	<script>
		(function($) {
		    "use strict";

			$(document).ready(function ($) {
				stmPlayIframeVideo();
			});

			/* Custom func */
			function stmPlayIframeVideo() {
				$('.stm_video_preview').on('click', function(){
					$(this).addClass('video_preloader_hidden');
					var addPlay = $(this).closest('.stm_video_wrapper').find('iframe').attr('data-src');
					$(this).closest('.stm_video_wrapper').find('.wpb_video_wrapper').addClass('video_autoplay_true');
					$(this).closest('.stm_video_wrapper').find('iframe').attr('src', addPlay + '&autoplay=1');
				});
			};

		})(jQuery);
	</script>
<?php endif; ?>

I hope this can help.

• This reply was modified 1 year, 3 months ago by wiwaltill.

Hi @wiwaltill,

Right, it appears to be a custom implementation from your theme.

Looks like it attempts to adjust the Video URL when its’ “Play” button is clicked, but if it tries doing that when Complianz has blocked the YouTube video (in other words: when the YouTube integration is enabled in Complianz) this change results in an incorrect URL & therefore a 404 page appears instead of the video.

The recommended solution would be to leave only one of the implementations active, to ensure that they don’t conflict with one another.

Kind regards, Jarno