Results 1 to 2 of 2

Thread: Urgent: Need help on embedding Video background in webpage

  1. #1
    Junior Member
    Join Date
    Aug 2016
    Posts
    1

    Exclamation Urgent: Need help on embedding Video background in webpage

    Hi all,

    I need some advice on the below scripting, I have recently purchased a template and I am trying to edit the coding to put up a video background.

    So far the video background website is up but there are 3 problems that I have encountered.

    I had been trying to do some tuning here and there, but it just don't seems to work.

    Currently the video is stream by Youtube API

    1) Video play only when I am visiting webpage by computer, when I am using Handphones or Tablets, the video just cannot be loaded.
    2) what do I need to change if I wanted my video to show in full size even when I resize my browser. Right now the video will cropped by itself according to my display size.
    3) What do I need to edit if I wanted to put the video in my working folder rather than streaming through Youtube API.


    Code:
    <div class="videowrap" style="overflow:hidden; max-height:750px; margin-top:0px;"> 
                <div class="video-containeryt"> 
                    <div id="player" class="youtubevideobg"> 
    </div>                 
                </div>             
                <div class="videocontent" style="top:23%;"> 
                    <div class="block2 text-center max80"> 
                        <h4 style="color:#ffffff;"> <span class="text2 wow zoomIn" data-wow-delay="0.4s" data-wow-duration="2s"> 
    			Demo Display </span></h4> 
                        <h2 style="color:#ffffff;"> <span class="text1 nomargbot wow bounceIn" data-wow-delay="0s" data-wow-duration="1s"> 
            Demo Tagline </span></h2> 
                        <a href="#about" class="btn btn-ghost wow zoomIn">Take a Tour</a> 
                    </div>                 
                </div>             
            </div>         
            <script>
    	var tag = document.createElement('script');
    	tag.src = 'https://www.youtube.com/iframe_api';
    	var firstScriptTag = document.getElementsByTagName('script')[0];
    	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    	var player;
    	function onYouTubeIframeAPIReady() {
    	player = new YT.Player('player', {				 
    	  height: '100%',
    	  width: '100%',
    	  videoId: 'l61locQqopA',
    	  playerVars: { 'autoplay': 1, 'mute': 1, 'controls': 0, 'rel': 0, 'hd': 1, 'modestbranding': 1, 'loop': 1, 'showinfo':0, 'autohide': 1, 'disablekb': 1 },
    	  events: {
    		'onReady': onPlayerReady,
    		onStateChange: function(e){
                e.target.mute();
    			var id = 'l61locQqopA';
    			if(e.data === YT.PlayerState.ENDED){
    				player.loadVideoById(id);
    			}
    		}					
    	  }
    	});
    	}			 
    	function onPlayerReady(event) {
    	event.target.playVideo();
    	}
    </script>


    Appreciate everyone kind assistance.

  2. #2
    Junior Member
    Join Date
    Sep 2016
    Posts
    13
    Quote Originally Posted by wynn View Post
    Hi all,

    I need some advice on the below scripting, I have recently purchased a template and I am trying to edit the coding to put up a video background.

    So far the video background website is up but there are 3 problems that I have encountered.

    I had been trying to do some tuning here and there, but it just don't seems to work.

    Currently the video is stream by Youtube API

    1) Video play only when I am visiting webpage by computer, when I am using Handphones or Tablets, the video just cannot be loaded.
    2) what do I need to change if I wanted my video to show in full size even when I resize my browser. Right now the video will cropped by itself according to my display size.
    3) What do I need to edit if I wanted to put the video in my working folder rather than streaming through Youtube API.


    Code:
    <div class="videowrap" style="overflow:hidden; max-height:750px; margin-top:0px;"> 
                <div class="video-containeryt"> 
                    <div id="player" class="youtubevideobg"> 
    </div>                 
                </div>             
                <div class="videocontent" style="top:23%;"> 
                    <div class="block2 text-center max80"> 
                        <h4 style="color:#ffffff;"> <span class="text2 wow zoomIn" data-wow-delay="0.4s" data-wow-duration="2s"> 
    			Demo Display </span></h4> 
                        <h2 style="color:#ffffff;"> <span class="text1 nomargbot wow bounceIn" data-wow-delay="0s" data-wow-duration="1s"> 
            Demo Tagline </span></h2> 
                        <a href="#about" class="btn btn-ghost wow zoomIn">Take a Tour</a> 
                    </div>                 
                </div>             
            </div>         
            <script>
    	var tag = document.createElement('script');
    	tag.src = 'YourServerName/YourFolderLocation';
    	var firstScriptTag = document.getElementsByTagName('script')[0];
    	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    	var player;
    	function onYouTubeIframeAPIReady() {
    	player = new YT.Player('player', {				 
    	  height: '100%',
    	  width: '100%',
    	  videoId: 'NameOfVideoGoesHere',
    	  playerVars: { 'autoplay': 1, 'mute': 1, 'controls': 0, 'rel': 0, 'hd': 1, 'modestbranding': 1, 'loop': 1, 'showinfo':0, 'autohide': 1, 'disablekb': 1 },
    	  events: {
    		'onReady': onPlayerReady,
    		onStateChange: function(e){
                e.target.mute();
    			var id = 'NameOfVideoGoesHere';
    			if(e.data === YT.PlayerState.ENDED){
    				player.loadVideoById(id);
    			}
    		}					
    	  }
    	});
    	}			 
    	function onPlayerReady(event) {
    	event.target.playVideo();
    	}
    </script>


    Appreciate everyone kind assistance.

    From above I'm guessing, you should download your video directly from youtube - https://www.youtube.com/watch?v=l61locQqopA Put it on your local server. See changes in quoted text above. I'm not going to venture a guess about the other questions, but I would suggest a different video player (than the youtube video player that the script calls). Good luck.

    Thinking about it, I would definitely go with a different video player, or no player at all (html5 handles video just fine on its own).
    Last edited by lektrikpuke; 09-06-2016 at 08:54 PM. Reason: get rid of youtube player

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •