Reference blog

Tag: video

  • WordPress: Responsive video (mp4 video inserted from media library)

    Changed the wordpress wp-includes/media.php file. Probably not the best way to do this.
    Ref: https://codex.wordpress.org/Video_Shortcode

    At around line 2504, comment out the following:

    $html_atts = array(
	'class'    => $atts['class'],
	'id'       => sprintf( 'video-%d-%d', $post_id, $instance ),
	'width'    => $atts['width'],
	//'width'    => absint( $atts['width'] ),
	//'height'   => absint( $atts['height'] ),
	'poster'   => esc_url( $atts['poster'] ),
	'loop'     => wp_validate_boolean( $atts['loop'] ),
	'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
	'preload'  => $atts['preload'],
);

    At around line 2565, comment out the following and add code:

    if ( ! empty( $atts['width'] ) ) {
//	$width_rule = sprintf( 'width: %dpx; ', $atts['width'] );
	$width_rule = '';
}

    Added additional CSS styles to make it work.

    video {
  width: 100%    !important;
  height: auto   !important;
}

    Source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
    https://coolestguidesontheplanet.com/videodrome/youtube/

    While we’re at it, also centralize the video with this CSS

    .wp-video { display:block; margin: 0 auto; }

  • Embed a video with both autoplay, mute and other variables

    Source: http://stackoverflow.com/questions/19241151/adding-additional-parameters-to-the-yt-player-object-from-youtube

    https://developers.google.com/youtube/player_parameters?playerVersion=HTML5

    https://productforums.google.com/forum/#!msg/youtube/XS5_P_9OXCo/-oNOf3d8x4sJ

    http://jsfiddle.net/oLtcsh49/2/

    <!– 1. The <iframe> (and video player) will replace this <div> tag. –>
    <div id=”player”></div>

    <script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement(‘script’);

    tag.src = “https://www.youtube.com/iframe_api“;
    var firstScriptTag = document.getElementsByTagName(‘script’)[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player(‘player’, {
    height: ‘195’,
    width: ‘260’,
    videoId: ‘h3P1OR9gg2Y’,
    playerVars: { ‘autoplay’: 1, ‘controls’: 1,’showinfo’:0, rel:0},
    events: {
    ‘onReady’: onPlayerReady,
    ‘onStateChange’: onPlayerStateChange
    }
    });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
    event.target.setVolume(0);
    event.target.playVideo();
    }

    // 5. The API calls this function when the player’s state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;
    function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
    //      setTimeout(stopVideo, 6000);
    done = true;
    }
    event.target.setVolume(0);
    }
    </script>