YouTube iFrame 404 Error | ww.wp.xz.cn

Resolved wiwaltill
(@wiwaltill)

2 years, 10 months ago
I activated the YouTube integration yesterday. The blocking also worked well at first. Now when I want to watch the video, I always get a 404 error. According to the console, this is what is displayed:

[Error] Failed to load resource: the server responded with a status of 404 () (undefined&autoplay=1, line 0)

XMLHttpRequest cannot load https://www.youtube.com/api/stats/atr?ns=yt&el=embedded&cpn= […] due to access control checks.

[Error] XMLHttpRequest cannot load https://www.youtube.com/youtubei/v1/log_event?alt=json&key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8 due to access control checks.

If I reject the coockies first, a placeholder is displayed correctly. When I click the placeholder, the video starts correctly.

When I switch to safe mode, everything works perfectly. The site uses the MasterStudy theme and the WPBakery page builder.
- This topic was modified 2 years, 10 months ago by wiwaltill.
The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Thread Starter wiwaltill
(@wiwaltill)

2 years, 10 months ago
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 2 years, 10 months ago by wiwaltill.
Plugin Contributor Jarno Vos
(@jarnovos)

2 years, 10 months ago
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 2 years, 10 months ago by Jarno Vos.
Thread Starter wiwaltill
(@wiwaltill)

2 years, 10 months ago

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?

Thread Starter wiwaltill
(@wiwaltill)

2 years, 10 months ago

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.

Plugin Contributor Jarno Vos
(@jarnovos)

2 years, 10 months ago

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

Thread Starter wiwaltill
(@wiwaltill)

2 years, 10 months ago

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

Plugin Author Aert
(@aahulsebos)

2 years, 10 months ago

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
Thread Starter wiwaltill
(@wiwaltill)

2 years, 10 months ago
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' => 'http://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 2 years, 10 months ago by wiwaltill.
Plugin Contributor Jarno Vos
(@jarnovos)

2 years, 9 months ago

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

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘YouTube iFrame 404 Error’ is closed to new replies.

Tags

9 replies
3 participants
Last reply from: Jarno Vos
Last activity: 2 years, 9 months ago
Status: resolved