{"id":4568,"date":"2021-04-27T07:45:32","date_gmt":"2021-04-27T02:15:32","guid":{"rendered":"https:\/\/www.hostdigitalmarketing.com\/?p=4568"},"modified":"2022-04-21T23:18:17","modified_gmt":"2022-04-21T17:48:17","slug":"embed-youtube-video-on-wordpress-website-with-autoplay-in-mobile","status":"publish","type":"post","link":"https:\/\/www.hostdigitalmarketing.com\/blog\/embed-youtube-video-on-wordpress-website-with-autoplay-in-mobile\/","title":{"rendered":"Embed Youtube video on WordPress Website with AutoPlay in mobile"},"content":{"rendered":"\n<p>Hello friends, In this article, you will know, How to AutoPlay YouTube Video in Mobile (Android &amp; IOS) &amp; How to Increase YouTube Videos Views in Hindi.<\/p>\n\n\n\n<p>Here is the simple code to post on your website where you want to add your youTube video. If you have confused to complete this work.<\/p>\n\n\n\n<p>Below I have shared a detailed video that how to do this work. After this code, you will get a video to watch it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- 1. The &lt;iframe&gt; (video player) will replace this &lt;div&gt; tag. --&gt;\n&lt;div class=\"iframe-container\"&gt;\n  &lt;div id=\"player\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;script&gt;\n  \/\/ 2. This code loads the IFrame Player API code asynchronously.\n  var tag = document.createElement('script');\n\n  tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n  var firstScriptTag = document.getElementsByTagName('script')&#91;0];\n  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n  \/\/ 3. This function creates an &lt;iframe&gt; (and YouTube player)\n  \/\/    after the API code downloads.\n  var player;\n  function onYouTubeIframeAPIReady() {\n    player = new YT.Player('player', {\n      width: '100%',\n      videoId: 'qIjxPxh78aU',\n      playerVars: { 'autoplay': 1, 'playsinline': 1 },\n      events: {\n        'onReady': onPlayerReady\n      }\n    });\n  }\n\n  \/\/ 4. The API will call this function when the video player is ready.\n  function onPlayerReady(event) {\n     event.target.mute();\n    event.target.playVideo();\n  }\n&lt;\/script&gt;\n\n&lt;style&gt;\n\/* Make the youtube video responsive *\/\n  .iframe-container{\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%;\n    height: 0;\n  }\n  .iframe-container iframe{\n    position: absolute;\n    top:0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-autoplay-youtube-video-in-mobile-live-practice\">Autoplay YouTube Video in Mobile Live Practice.<\/h2>\n\n\n\n<iframe loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/0g5csy1JRj4\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-below-is-an-example-of-my-work\">Below is an example of my work<\/h2>\n\n\n\n<!-- 1. The <iframe> (video player) will replace this <div> tag. -->\n<div class=\"iframe-container\">\n  <div id=\"player\"><\/div>\n<\/div>\n<script>\n  \/\/ 2. This code loads the IFrame Player API code asynchronously.\n  var tag = document.createElement('script');\n\n  tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n  var firstScriptTag = document.getElementsByTagName('script')[0];\n  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n  \/\/ 3. This function creates an <iframe> (and YouTube player)\n  \/\/    after the API code downloads.\n  var player;\n  function onYouTubeIframeAPIReady() {\n    player = new YT.Player('player', {\n      width: '100%',\n      videoId: 'sWkyyW9RR78',\n      playerVars: { 'autoplay': 1, 'playsinline': 1 },\n      events: {\n        'onReady': onPlayerReady\n      }\n    });\n  }\n\n  \/\/ 4. The API will call this function when the video player is ready.\n  function onPlayerReady(event) {\n     event.target.mute();\n    event.target.playVideo();\n  }\n<\/script>\n\n<style>\n\/* Make the youtube video responsive *\/\n  .iframe-container{\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%;\n    height: 0;\n  }\n  .iframe-container iframe{\n    position: absolute;\n    top:0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n<\/style>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-white-color has-black-background-color has-text-color has-background\"><strong>Useful Tools &amp; Website for Bloggers:-<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.hostdigitalmarketing.com\/blog\/grammarly-review\/\">Grammarly Review 2021: What is Extra in Premium?<\/a><\/li><li><a href=\"https:\/\/www.hostdigitalmarketing.com\/blog\/hostinger-web-hosting-review\/\">Hostinger: Best Cheap WordPress Hosting<\/a><\/li><li><a href=\"https:\/\/www.tkqlhce.com\/click-100189693-14061248\" target=\"_blank\" rel=\"noreferrer noopener\">Namecheap Shared WordPress Hosting Deals<\/a><\/li><li><a href=\"https:\/\/www.anrdoezrs.net\/click-100189693-14326267\" target=\"_blank\" rel=\"noreferrer noopener\">Get Cheap &amp; Best Deal on Domain<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hello friends, In this article, you will know, How to AutoPlay YouTube Video in Mobile (Android &amp; IOS) &amp; How to Increase YouTube Videos Views in Hindi. Here is the simple code to post on your website where you want to add your youTube video. If you have confused to complete this work. Below I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","_jetpack_memberships_contains_paid_content":false,"ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[32,21],"tags":[],"class_list":["post-4568","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing","category-wordpress","entry","has-media"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-content\/uploads\/2021\/04\/Autoplay-YouTube-Video-In-Mobile-Live-Practice.jpg","_links":{"self":[{"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/posts\/4568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/comments?post=4568"}],"version-history":[{"count":1,"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/posts\/4568\/revisions"}],"predecessor-version":[{"id":6073,"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/posts\/4568\/revisions\/6073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/media\/4585"}],"wp:attachment":[{"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/media?parent=4568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/categories?post=4568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostdigitalmarketing.com\/blog\/wp-json\/wp\/v2\/tags?post=4568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}