How to display Embed Youtube video in your websites with various options | Sanwebcorner

How to display Embed Youtube video in your websites with various options

Lot of peoples struggling to place the video file to their websites. The YouTube is one of the good resource to use videos with perfect format in your website as a embedded YouTube video format. The youtube embedded videos haves lot of option to be enable and disable in this. We will see the entire videos option in this post. It is very easy to implement videos in webpages follow the below steps.

Step 1: Open uploaded video in Youtube and click share button.

Embed Youtube video in your websites



















Step 2: Click Embed and copy the code and paste it in your webpage.

Embed Youtube video in your websites


















Example Embed Video with full screen:

If you want embedded video also want to allow full screen you can use the below code. This code helps you to provide option in right corner icon to view the full screen .

<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/L9e-wC_1Mcs" width="560"></iframe>



Disable full screen on youtube Iframe Video

In some place you don't want to show the full screen option to the customers so you can disable the fullscreen mode using below code. This is nothing just remove the allowfullscreen from the previous code

<iframe frameborder="0" height="315" src="https://www.youtube.com/embed/L9e-wC_1Mcs" width="560"></iframe>



Example: YouTube Embed Video with Autoplay option

In some places you want to display the auto play videos there is an option in the youtube embed video you just use ?autoplay=1 to the youtube embed video url. just refer the below code and the below example to clear understand.

<iframe frameborder="0" height="315" src="https://www.youtube.com/embed/L9e-wC_1Mcs?autoplay=1" width="560"></iframe>



Example: YouTube Embed Video with Loop option

The youtube video with loop is nothing but this video will continuously repeated. To do this you can use the code ?playlist=video id&loop=1 you can also set the different video id so that that two videos will repeated. and also you can set the playlist using different types of video id.

<iframe frameborder="0" height="315" src="https://www.youtube.com/embed/L9e-wC_1Mcs?playlist=L9e-wC_1Mcs&loop=1" width="560"></iframe>



Example: YouTube Embed Video without Controls

If you don't want to display the any controls in the youtube video you just use ?controls=0 this code after youtube embed id with controls=0 so that it won't display any controls in youtube embed video.


<iframe frameborder="0" height="315" src="https://www.youtube.com/embed/L9e-wC_1Mcs?controls=0" width="560"></iframe>



Example: YouTube remove related Videos

This is one of the important thing because at the end of the video every youtube videos will show the related videos default so to avoid this related videos you can use this ?rel=0 in youtube embed video url.Below is the iframe code with example to your better understand.
<iframe frameborder="0" height="315" src="https://www.youtube.com/embed/L9e-wC_1Mcs?rel=0" width="560"></iframe>



 For More For more options and controls visit youtube api link  youtube iframe Player API Click Here

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll create random number Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html dropdown html form html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover lock & unlock page scroll marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form Multi-Step-form mysql News ticker on hover change text to image our team page password generator password strength checker Photoshop PHP populate html selectbox Popup image on click the link pure css Question type form random number generate Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image selectbox based on select box simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube