Hi there ! Sorry for my English is not my native language.
I just saw after the pro update that video on background (sections) are now working on Android !
This is great but they are not working on Iphone.
I think it need to have the “playsinline” attribute on the video tag not present, but event with Jquerry i can’t add it.
Any idea how to make this work on iphone too ?
Thanks !
I found a solution but its not perfect since it will be deleted if pro get an update :
I edited the file : pro/cornerstone/includes/shortcodes/video-player.php
And edited line 159 :
$video = "<video class=\"x-mejs has-stack-styles{$advanced_controls}{$legacy}\"{$poster_attr}{$preload}{$autoplay}{$loop}{$muted}{$playsinline}>{$sources}</video>";
i added the $playsinline variable before :
$playsinline = ' playsinline' : '';
Its working fine on Iphone now, maybe adding this to a future release ? that would be great.
Hello @popoche,
Thanks for writing in! Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Custom Video Player
// =============================================================================
function custom_x_shortcode_video_player( $atts ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'type' => '',
'src' => '',
'poster' => '',
'preload' => '',
'advanced_controls' => '',
'hide_controls' => '',
'autoplay' => '',
'loop' => '',
'muted' => '',
'no_container' => '',
'm4v' => '',
'ogv' => ''
), $atts, 'x_video_player' ) );
$id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class = ( $class != '' ) ? 'x-video player ' . esc_attr( $class ) : 'x-video player';
$style = ( $style != '' ) ? 'style="' . $style . '"' : '';
switch ( $type ) {
case '5:3' :
$type = ' five-by-three';
break;
case '5:4' :
$type = ' five-by-four';
break;
case '4:3' :
$type = ' four-by-three';
break;
case '3:2' :
$type = ' three-by-two';
break;
default :
$type = '';
}
$src = ( $src != '' ) ? explode( '|', $src ) : array();
$poster = ( $poster != '' ) ? $poster : '';
$preload = ( $preload != '' ) ? ' preload="' . $preload . '"' : ' preload="metadata"';
$advanced_controls = ( $advanced_controls == 'true' ) ? ' advanced-controls' : '';
$hide_controls = ( $hide_controls == 'true' ) ? ' hide-controls' : '';
$autoplay = ( $autoplay == 'true' ) ? ' autoplay' : '';
$loop = ( $loop == 'true' ) ? ' loop' : '';
$muted = ( $muted == 'true' ) ? ' muted' : '';
$no_container = ( $no_container == 'true' ) ? '' : ' with-container';
//
// Deprecated parameters.
//
$m4v = ( $m4v != '' ) ? '<source src="' . $m4v . '" type="video/mp4">' : '';
$ogv = ( $ogv != '' ) ? '<source src="' . $ogv . '" type="video/ogg">' : '';
//
// Variable markup.
//
if ( is_numeric( $poster ) ) {
$poster_info = wp_get_attachment_image_src( $poster, 'full' );
$poster = $poster_info[0];
}
$is_bg = ( strpos( $class, 'bg' ) !== false ) ? true : false;
$inner_bg_class = ( $is_bg ) ? ' transparent' : '';
$bg_template_start = ( $is_bg ) ? '<script type="text/template">' : '';
$bg_template_end = ( $is_bg ) ? '</script>' : '';
$poster_attr = ( $poster != '' ) ? ' poster="' . $poster . '"' : '';
$data = cs_generate_data_attributes( 'x_mejs', array( 'poster' => $poster ) );
//
// Enqueue scripts.
//
wp_enqueue_script( 'mediaelement' );
//
// Build sources.
//
$sources = array();
$vimeo = '';
$youtube = '';
foreach( $src as $file ) {
if ( preg_match( '#webm|mp4|ogv#', $file ) ) {
$is_vimeo = false;
$is_youtube = false;
} else {
$is_vimeo = preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $file );
$is_youtube = preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $file );
}
if ( $is_vimeo ) {
$mime = array( 'type' => 'video/vimeo' );
$vimeo = ' vimeo';
wp_enqueue_script( 'mediaelement-vimeo' );
} else if ( $is_youtube ) {
$mime = array( 'type' => 'video/youtube' );
$youtube = ' youtube';
} else {
$parts = parse_url( $file );
$scheme = isset( $parts['scheme'] ) ? $parts['scheme'] . '://' : '//';
$host = isset( $parts['host'] ) ? $parts['host'] : '';
$path = isset( $parts['path'] ) ? $parts['path'] : '';
$clean = $scheme . $host . $path;
$mime = wp_check_filetype( $clean, wp_get_mime_types() );
}
$sources[] = '<source src="' . esc_url( $file ) . '" type="' . $mime['type'] . '">';
}
if ( $m4v != '' ) {
$sources[] = $m4v;
}
if ( $ogv != '' ) {
$sources[] = $ogv;
}
//
// Legacy.
//
GLOBAL $wp_version;
$legacy = ( version_compare( '4.9', $wp_version, '>' ) ) ? ' x-mejs-legacy-compat' : '';
//
// Markup.
//
if ( ! empty( $sources ) ) {
$sources = implode( '', $sources );
$video = "<video class=\"x-mejs has-stack-styles{$advanced_controls}{$legacy}\"{$poster_attr}{$preload}{$autoplay}{$loop}{$muted}>{$sources}</video>";
} else {
$video = '<span class="x-mejs-no-source">' . csi18n('shortcodes.video-missing-source') . '</span>';
}
$output = "<div {$id} class=\"{$class}{$hide_controls}{$autoplay}{$loop}{$muted}{$playsinline}{$no_container}{$vimeo}{$youtube}\" {$data} {$style}>"
. $bg_template_start
. "<div class=\"x-video-inner{$type}{$inner_bg_class}\">{$video}</div>"
. $bg_template_end
. '</div>';
return $output;
}
add_filter('wp_head', 'my_custom_video_player');
function my_custom_video_player() {
remove_shortcode( 'x_video_player' );
add_shortcode( 'x_video_player', 'custom_x_shortcode_video_player' );
}
// =============================================================================
This should make sure that your modifications will not be overwritten when there is a Pro theme updates.
Thanks ! Worked like a charm, i didn’t know i could remove the shortcode like that and override it with my own.
Awesome !
Hey @popoche ,
You’re welcome! We are just glad we were able to help you out.
We really appreciate for letting us know that it has worked for you.
Cheers.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.