Slidedown() Function Behaving Oddly

firstly I should say I am fairly new to web development and teaching myself through tutorials and this site etc... I am trying to get videos displayed on this project with a nice s

Solution 1:

Your problem is that as the video is "sliding down", it's height is constantly changing, and the browser is keeping the aspect ratio of the video the same, which appears to make it also slide out horizontally. To fix that, I would wrap the video in a span, and then slide the span down. That way the video's height is never changing, so it's width won't change, and that should remove the horizontal motion you're seeing.

So HTML would look something like this:

<p>Nullam dictum felis
    <spanid="test">Some text</span><spanclass="wrapVideo"><videoid="videoTest"width="350"height="200"autoplay><sourcesrc="http://techslides.com/demos/sample-videos/small.mp4"type="video/mp4"></video></span>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>

CSS:

.wrapVideo {
    height: 200px;
    display: none;
}

JS - I changed it to slideToggle, and stopped changing the class on the video: EDIT to play/pause on slideDown/slideUp

$(document).ready(function(){
    $("#test").click(function(){
        if($(".wrapVideo").css("display") == 'none') {
            $(".wrapVideo").slideDown("slow");
            $("#videoTest").get(0).play();
        } else {
            $(".wrapVideo").slideUp("slow");
            $("#videoTest").get(0).pause();
        }
    })
});

BONUS: by removing the controls attribute from the video element, the controls no longer show up, and adding the autoplay attribute allows the video to start playing without controls.

Here is a working codepen.

Solution 2:

please check the fiddle located at https://jsfiddle.net/c16kpve6/

<buttonid='slideDown'>slide down</button><divid='container'><imgsrc="https://peach.blender.org/wp-content/uploads/dl_vim.jpg?x11217"alt=""><videosrc="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video></div>

CSS

#container {
  height: 180px;
  width: 320px;
  position: relative;
  display:none;
 }
#containerimg {
  position: absolute;
  height: 180px;
  width: 320px;
  left:0;
  right:0;
  z-order: -1;
  float: left;
}

#containervideo {
  position: absolute;
  height: 180px;
  width: 320px;
  left:0;
  right:0;
  float: left;
  display: none;
}

JS

$('#slideDown').on('click', function() {
  $('#container').slideDown(function(){
    $('video').show();
  })
})